Jquery SlideToggle Multiple Divs with same classes

Question

I created a Read More / Less Toggle in Jquery. Now i need some help, I'm a Beginner in Jquery and don't know all functions.

My Code: http://jsfiddle.net/U6yk2/

HTML:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor      invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="toggle">
<div class="more" style="display:none">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
</div>
<div class="less">
<a class="button-read-more button-read" href="#read">Mehr lesen</a>
<a class="button-read-less button-read" href="#read">Weniger anzeigen</a>
</div>
</div>

JS:

jQuery(document).ready(function() {
$(".more").hide();
jQuery('.button-read-more').click(function(){
     jQuery('.less').toggleClass('active');
     $(".more").slideDown("1000");
});
jQuery('.button-read-less').click(function(){
     jQuery('.less').removeClass('active');
     $(".more").slideUp("1000");
});
});

CSS:

.less.active .button-read-more {
display: none;
}

.button-read-less{
display: none;
}

.less.active .button-read-less{
display: block;
}

.more{
margin-top: 10px;
}

.more p{
margin: 0;
padding: 0;
}

My target is now, to have multiple Toggles but with the same classes.

Any suggestions? Thanks Chris

Answer 1

You need to use relative elements like

jQuery(function ($) {
    $(".more").hide();
    $('.button-read-more').click(function () {
        $(this).closest('.less').addClass('active');
        $(this).closest(".less").prev().stop(true).slideDown("1000");
    });
    $('.button-read-less').click(function () {
        $(this).closest('.less').removeClass('active');
        $(this).closest(".less").prev().stop(true).slideUp("1000");
    });
});

Demo: Fiddle

Answer 2

update your code - it will toggle correctly .

jQuery(document).ready(function() {
    $(".more").hide();
    jQuery('.button-read-more').click(function(){
        jQuery('.less').toggleClass('active');
        $(this).slideDown("1000");
    });
    jQuery('.button-read-less').click(function(){
        jQuery('.less').removeClass('active');
        $(this).slideUp("1000");
    });
});

Answer 3

You can use closest and find to get the current paragrpah and expand it accordingly.

Code:

jQuery(document).ready(function() {
    $(".more").hide();
    jQuery('.button-read-more').click(function(){
         var $par=$(this).closest('.toggle')
         $par.find('.less').toggleClass('active');
         $par.find(".more").slideDown("1000");
    });
    jQuery('.button-read-less').click(function(){
         var $par=$(this).closest('.toggle')
         $par.find('.less').removeClass('active');
         $par.find(".more").slideUp("1000");
    });
  });

Demo: http://jsfiddle.net/gZz9x/

Answer 4

Use .closest() method to work only in current context. Update your code to

jQuery(document).ready(function() {
    $(".more").hide();
    jQuery('.button-read-more').click(function(){
        var toggle = $(this).closest('.toggle');
        toggle.find('.less').toggleClass('active');
        toggle.find('.more').slideDown("1000");
    });
    jQuery('.button-read-less').click(function(){
        var toggle = $(this).closest('.toggle');
        toggle.find('.less').removeClass('active');
        toggle.find('.more').slideUp("1000");
    });
});