Make a DIV expandable

Question

I have a div and it contains a paragraph that is populated dynamically. Sometimes the paragraph is 20 lines, and sometimes it is 3.

I want to set a height limit upon which if the div is larger than this (due to there being more lines in the paragraph) it will shrink it down to only show 3 lines of text and then have a "View More" button that will expand and/or collapse the div upon request to show the remaining lines in the paragraph.

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>{{paragraph}}</p>
</div>

Any tips on how I can do this as easily as possible?

Answer 1

If you want exactly 3 lines, notice that this means that the height should be 3*line-height. You could then do this:

HTML

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>...</p>
  <a>More</a>
</div>

CSS

p {
    line-height: 18px;
    height: 54px;
    overflow: hidden;
}

overflow: hidden will hide content that exceed the container boundaries.

jQuery

We then toggle the height constraint.

$('a').click(function() {
    var p = $('a').prev('p')
    var lineheight = parseInt(p.css('line-height'))
    if (parseInt(p.css('height')) == lineheight*3) {
       p.css('height','auto');
       $(this).text('Less')
    } else {
       p.css('height',lineheight*3+'px');
       $(this).text('More')
    }
});

See demo.

Answer 2

You can do this with some simple Javascript (no jQuery needed) and some CSS classes. To simplify design, assume a set min and max height.

Demo:

Script:

document.getElementById( 'slide' ).addEventListener( 'click', function() {
    var body = document.getElementById( 'slide-body' );
    if( body.className == 'expanded' ) {
        body.className = '';
        document.getElementById( 'more' ).textContent = 'more...';
    } else {
        body.className = 'expanded';
        document.getElementById( 'more' ).textContent = 'less...';
    };
} );

HTML:

<div id="slide">
    <div id="slide-body">
    A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. 
    </div>
    <div id="more">more...</div>
</div>

CSS:

#slide {
    border: 1px solid black;
}
#slide-body{
    height: 55px;    
    overflow: hidden;
    transition:             height 500ms ease;
        -moz-transition:    height 500ms ease;
        -ms-transition:     height 500ms ease;
        -o-transition:      height 500ms ease;
        -webkit-transition: height 500ms ease;
}
.expanded {
    height: 150px !important;
}
#more {    
    cursor: pointer;
    text-align: right;
}