There are jQuery plugins, like TextExpander, which work well with portions of text wrapped inside a single element (like a ‘<p>’ tag), but when it comes to collapse block elements, the animation is not so smooth.
Here is a very rudimentary (but working) solution for truncating sections of text paragraphs and adding a ‘read more’ button.
<div class="expandable"> <div class="inner"> <p>Some text ...</p> <p>Some text ...</p> </div> </div>
.expandable .inner { overflow: hidden; }
$('div.expandable > div.inner').each(function(){ var expadable_height = $(this).height(); var visible_lines = 42; //the height of the minimum visible lines of text in px $(this).css('height', visible_lines); $(this).parent('div.expandable').append('<span class="see-more">See More</span>'); var toggle = 0; $(this).siblings('.see-more').click(function(){ if( toggle == 1 ){ $(this).siblings('div.inner').animate({height: visible_lines}, 500); $(this).text('See More'); toggle = 0; } else { $(this).siblings('div.inner').animate({height: expadable_height}, 500); $(this).text('See Less'); toggle = 1; } }); });
Leave a Reply