CODEWITHSUNDEEP
jqueryhtmlcss
Will Curran
Will Curran

Reputation: 7110

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. 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.

Upvotes: 4

Views: 29591

Answers (6)

jondavidjohn
jondavidjohn

Reputation: 62392

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.

Upvotes: 14

ghostCoder
ghostCoder

Reputation: 7655

Use this plugin

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

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

Upvotes: 2

Mick
Mick

Reputation: 31919

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

Upvotes: 2

Danish
Danish

Reputation: 704

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.

Upvotes: 0

Keith
Keith

Reputation: 5381

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>

Upvotes: 1

Zack Burt
Zack Burt

Reputation: 8455

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>

Upvotes: 1

Related Questions