Show more show less with JQuery

I want to show more/less using JQuery. I've tried a couple examples by Googling but neither work. No开发者_Go百科thing fancy, I just need a paragraph of text to be cut to a specific height, and a link the will expand/hide additional text.

---

This should toggle the showing of the full div by clicking the actual div, you can add the click event to any trigger 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 less with javascript initially will not hide the div indefinitely for users w/o javascript enabled.

---

You can use jQuery More Or Less. You can see a demo here

---

Use this plugin

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

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

---

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>

---

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>

---

My solution is a bit 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 break the length content into two pieces and hide the second one. The second section is shown using 'show more' link. You can find complete detail here, http://danishsultan.blogspot.com/2012/03/adding-show-less-show-more-feature.html.