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>

```

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](https://jsfiddle.net/fido3993/ns9az7wn/2/)
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.

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

```css
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;
  }
}
```

```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="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');
});

```