Mihail Ivanchev Mihail Ivanchev - 7 months ago 10
Javascript Question

Show/Hide text, based on number of lines

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>

Answer

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