Show more show less with JQuery

Question

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

Answer 1

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.

Answer 2

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