Show more with jQuery

Question

I want to show more / less using jQuery. I tried a couple of examples from Google, but didn't work. Nothing unusual, I just need a paragraph of text that needs to be cut to a certain height, and the link will expand / hide additional text.

Answer 1

This should toggle the display of the full div by clicking on the actual div, you can add the click event to any click you want.

HTML:

<div id="blah"> Long...Content </div> 

JavaScript:

 $('#blah').css({height:'20px', overflow:'hidden'}); $('#blah').on('click', function() { var $this = $(this); if ($this.data('open')) { $this.animate({height:'20px'}); $this.data('open', 0); } else { $this.animate({height:'100%'}); $this.data('open', 1); } }); 

Showing that with javascript it will not initially hide the div unlimitedly for users without enabling javascript.

Answer 2

You can use jQuery more or less. You can see the demo here.

Answer 3

Use this plugin

http://plugins.learningjquery.com/expander/index.html

It adds more or less without linking the html content of the text.

Answer 4

untested, but should work:

 <div style="height:500px;overflow:hidden" id="blah"> Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello. </div> <a href="#" id="showmore">Show more</a> <script> $("#showmore").live('click', function() { $("#blah").css('height','1000px'); }); </script> 

Answer 5

Quick and dirty sample:

 <style> .collapsed {height:50px; overflow:hidden} </style> <script> $(function() { $(".expander").click(function() { $("div").toggleClass("collapsed"); }); }) </script> <div class="collapsed">LOTS AND LOTS OF TEXT LOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXT</div> <span class="expander">Expand/Collapse</span> 

Answer 6

My decision is a little different.

  function SetMoreLess(para, thrLength, tolerance, moreText, lessText) { var alltext = $(para).html().trim(); if (alltext.length + tolerance < thrLength) { return; } else { var firstHalf = alltext.substring(0, thrLength); var secondHalf = alltext.substring(thrLength, alltext.length); var firstHalfSpan = '<span class="firstHalf">' + firstHalf + '</span>'; var secondHalfSpan = '<span class="secondHalf">' + secondHalf + '</span>'; var moreTextA = '<a class="moreText">' + moreText + '</a>'; var lessTextA = '<a class="lessText">' + lessText + '</a>'; var newHtml = firstHalfSpan + moreTextA + secondHalfSpan + lessTextA; $(para).html(newHtml); } } 

The logic is to split the contents of the length into two parts and hide the second. The second section is shown using the "show more" link. Here you can find complete information, http://danishsultan.blogspot.com/2012/03/adding-show-less-show-more-feature.html .