0

I'm creating a Toggle function I've done the bigger part (I hope). But now I'm facing two problem :

• I can Show and Hide my resume but I can't do it again (more than once in each direction).

• I Dont get how to apply this to a specific resume and not to every one; shall I use .each() ? I'm a bit lost on it I admit.

This is what I've manage to do for now :

HTML

<div class="resume">Lorem Ipsum .... </div>

jQuery

$(document).ready(function(){

    if($('.resume').text().length > 100)
    {
        complet = $('.resume').text();
        complet += '<span class="showLess"> Cacher</span>';
        html = $('.resume').text().slice(0,100);
        html += '<span class="showMore">...</span>';
        $('.resume').html(html);
    }

    $('.showMore').on('click',function(){
        $('.resume').html(complet);
        showLess();
    });

    function showLess(){
    $('.showLess').on('click', function() {
        $('.resume').html(html);
    });
    }

});

And here is the jsFiddle

Baldráni
  • 4,066
  • 3
  • 41
  • 63
  • 1
    Check out *event delegation* (specifically, `.on` with an actual container) – tymeJV Jul 16 '15 at 15:53
  • Don't change the html of `.resume`. Put the short and long versions in the DOM, and use `.hide()` and `.show()` to display the one you want. – Barmar Jul 16 '15 at 15:53
  • To apply it to a specific resume instead of all of them, use DOM navigation: `$(this).closest(".resume").html(whatever)`. – Barmar Jul 16 '15 at 15:54

0 Answers0