CODEWITHSUNDEEP
javascriptjqueryhtmllimit
user2347920
user2347920

Reputation: 3

jQuery Show More / Less Content

I'm having problems with showing and hiding content of a <p> tag what I need to do is have it so my 160 characters is limited to 40 when the page loads and then when you click show more it'll display 160 characters and if you click the button again you'll only see 40 characters, my problem is it displays all the content from all the <p> tags together for each one, and help would be great, thanks in advance!

HTML

<section class="row featured">
        <div class="column four comment">
            <img src="images/gallery/gallery-1.jpg" alt="">
            <div class="content">
                <h2>Lorem Ipsum</h2>
                <p class="limit">Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.</p>
                <button class="more align-right"><p class="highlight">Read more</p></button>
            </div>
        </div>
        <div class="column four comment">
            <img src="images/gallery/gallery-3.jpg" alt="">
            <div class="content">
                <h2>Lorem Ipsum</h2>
                <p class="limit">Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.</p>
                <button class="more align-right"><p class="highlight">Read more</p></button>
            </div>
        </div>
        <div class="column four comment">
            <img src="images/gallery/gallery-2.jpg" alt="">
            <div class="content">
                <h2>Lorem Ipsum</h2>
                <p class="limit">Aliquam dolor odio, porta id mollis ullamcorper, imperdiet sit amet odio. In eleifend dapibus massa ac aliquam. Nullam vulputate lectus ac nunc molestie mollis.</p>
                <button class="more align-right"><p class="highlight">Read more</p></button>
            </div>
        </div>
</section>

jQuery

 $(document).ready(function {
    var $this = $(this);
    var content = $('.limit').text();
    var limit = content.substring(0, 40);

    $('.limit').text(limit);    

    $('.more').click(function() { 

        var $this = $(this);
        var test = $this.siblings('p').text();
        var length = test.length;

        if(length == 40){

            $this.siblings('p').text(content);

        }
        else {

            $this.siblings('p').text(limit);
        }

    });
 });

Upvotes: 0

Views: 3535

Answers (3)

Chris Arasin
Chris Arasin

Reputation: 516

Rather than going through the process of storing the text in a variable, you also can set a height of one line of text on the paragraph and use css text-overflow to hide the rest of the text. Then show the full text on click. Fiddle here: http://jsfiddle.net/carasin/CpEZw/

CSS

.limit {
    text-overflow:ellipsis;
    overflow:hidden;
    line-height:1.5em;
    height:1.5em;;
    white-space: nowrap;
}

jquery

$(".more").click(function(){
    if (! $(this).hasClass('less')){
        $(this).addClass('less').prev('.limit').removeClass('limit').addClass('nolimit');
        $(this).children('p').text('Close');
    } else {
        $(this).removeClass('less').prev('.nolimit').removeClass('nolimit').addClass('limit');
        $(this).children('p').text('Read More');
    }  
});

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Doing var content = $('.limit').text(); take all three text and that's why you see 3 time the sentence.

You can use the function .data() to store the text for each element and then get it when you click on the button.

Here a fiddle : http://jsfiddle.net/SadLe/

On the doc ready, it will go throug each .limit with this loop : 

$('.limit').each(function(){
    $(this).data('content', $(this).text())
    $(this).data('limit', $(this).text().substring(0, 40))
    $(this).text( $(this).data('limit'))
})

Then on click you get the respective data that you stored :

$('.more').click(function() { 

    var $this = $(this);
    var elP = $this.siblings('p');
    var length = elP.text().length;

    if(length == 40){

        elP.text(elP.data('content'));

    }
    else {
        elP.text(elP.data('limit'));
    }

});

Upvotes: 1

tomca32
tomca32

Reputation: 1140

Your content variable is taking the text from all three instances of the .limit class, therefore you get triple text.

If you limit it to only the first instance like this:

var content = $('.limit:first').text();

You will get the right text: http://jsfiddle.net/6dhMc/

Upvotes: 0

Related Questions