Show/Hide text, based on number of lines

Question

I have a box of text, displayed vertically. My client wants the text in that box to be displayed in full when viewing on a computer/laptop, and to have a Show More button when viewing on mobile. I think the best way to do this, is to show, lets say 10 lines of text on a desktop, and 5 on mobile, and hide the rest, but I don't know if that is possible. Here is my HTML:

<div class="box31 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-0 col-xs-8 col-xs-offset-2">
  <div class="phone">
    <img src="imgs/phone.png" alt="phone">
  </div>
  <div class="box-text box-text2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
  <div class="view-more">
    <button class="btn btn-success">More...</button>
  </div>
</div>

Maybe this post will help solving your problem : [Detect mobile device](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery). I also found this helpful link: [3 ways to detect mobile device](http://magentohostsolution.com/3-ways-detect-mobile-device-jquery/) — flohdieter, Apr 22 '16 at 07:30
@KennyDs Yes, that is also an option. Problem is, I am a total noob when it comes to jQuery — Mihail Ivanchev, Apr 22 '16 at 07:33

score 2 · Answer 1 · answered Apr 22 '16 at 07:37

2

I think you can use the media queries of CSS like that:

 @media screen and (max-width: 768px) {
  p {
    max-height:60px;
    overflow: hidden;
    color:red;
  }
}

https://jsfiddle.net/wrbwpzwu/ (resize the result part to show differences)

answered Apr 22 '16 at 07:37

Dupuis David

391
1
13

This looks great and works for me. All I have to do now is find the jQuery that will remove the overflow, when I press the button, to show the whole text (or change the max-height). Thank you! – Mihail Ivanchev Apr 22 '16 at 07:57
`$("#button").on("click", function(){$(this).css("display", "hidden"); $("#myText").css("overflow", "visible");})` Something like that ;-) Enjoy. – Dupuis David Apr 22 '16 at 08:01

Fiido93 · Accepted Answer · 2016-04-22T10:15:07.767

1

Here is the way to achieve your result

CSS

.open {
    max-height:60px;
    overflow: hidden;
    }

.remove{
  max-height:100%;
}

JS

jQuery(function($){
  $('.event').click(function(){
  $('.open').toggleClass('remove')
    })
  })

DEMO

edited Apr 22 '16 at 10:15

answered Apr 22 '16 at 08:17

Fiido93

1,694
1
12
20

Thanks, it was exactly what I did. I'm marking this as the answer. – Mihail Ivanchev Apr 22 '16 at 08:33

Jamie Barker · Answer 3 · 2016-04-22T08:06:03.180

To work out how many lines to show, you need to work out your line-height multiplied by the number of rows you want to show. The example below is worked out to three rows.

document.querySelector('.view-more .btn').addEventListener('click', function() {
  this.parentNode.previousElementSibling.classList.add('more');
});

body {
  font-family: tahoma, sans-serif;
}
p {
  margin: 0 0 5px;
}
.box-text {
  font-size: 12px;
  line-height: 12px;
  max-height: 36px;
  overflow: hidden;
  margin-bottom: 10px;
}
.box-text.more {
  max-height: none;
  overflow: visible;
}
@media screen and (min-width: 480px) {
  .view-more {
    display: none;
  }
  .box-text {
    max-height: none;
    overflow: visible;
  }
}

<div class="box31 col-md-3 col-md-offset-0 col-sm-6 col-sm-offset-0 col-xs-8 col-xs-offset-2">
  <div class="box-text box-text2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>
  <div class="view-more">
    <button class="btn btn-success">More...</button>
  </div>
</div>

The above code uses the mobile first principle for the CSS.

The JavaScript is simply a click listener applied to the button that traverses the DOM to find the relevant box-text to add the more class to it, which removes/resets the max-height and overflow properties.

The jQuery equivalent for the above JS:

$('.view-more .btn').on('click', function() {
   $(this).parent().prev().addClass('more');
});

Show/Hide text, based on number of lines

3 Answers3