Как сделать эффект jQuery slidetoggle для нескольких div на одной странице?

Question

отлично работает за один div

(function($) { 
     $(document).ready(function(){
        $('#div1').hide();
        $('a.plus').click(function(){
           $('#div1').slideToggle();
           $(this).toggleClass("minus_icon"); 
           return false;
        });
     });
})(jQuery);

Как сделать так, чтобы эффект слайд-тогла несколько div на одной странице? У меня есть несколько div s с другим идентификатором, чтобы скрыть как #div1, #div2, div#3.

редактирование:

Это ситуация в HTML

<a class="plus"> more details </a>
<div id="div1" class="description">
<p> Hidden content here </p>
</div>

<a class="plus"> more details </a>
<div id="div2" class="description">
<p> Hidden content here </p>
</div>

<a class="plus"> more details </a>
<div id="div3" class="description">
<p> Hidden content here </p>
</div>

Answer 1

(функция ($) { $ (Документ) .ready (функция () { $ ('# div1, # div2, # div3'). hide (); $ ( 'A.plus'). Выберите (функция () { . $ (Это) .next () slideToggle (); $ (Это) .toggleClass ( "minus_icon"); вернуть ложь; }); }); }) (Jquery);

Answer 2

Предположим, ваш HTML выглядит примерно так:

<div id="div1" class="more">Content</div>
<a class="plus">Show More</a>

<div id="div2" class="more">Content</div>
<a class="plus">Show More</a>

<div id="div3" class="more">Content</div>
<a class="plus">Show More</a>

Тогда такая функция будет работать для столько пар a.plus / div, сколько у вас есть:

(function($) { 
 $(document).ready(function(){
    $('div.more').hide();
    $('a.plus').click(function(){
       $(this).prev().slideToggle(); // if your divs are after the plus, use next() instead
       $(this).toggleClass("minus_icon"); 
       return false;
    });
 });
})(jQuery);

Если ваши a.more по какой-либо причине не находятся рядом с div, вы должны будете установить атрибут на a.more, чтобы связать его с div, например.(HTML)

<a class="plus" data-article="1">Show More</a>
<a class="plus" data-article="2">Show More</a>
<a class="plus" data-article="3">Show More</a>

... some more HTML

<div id="div1" class="more">Content</div>
<div id="div2" class="more">Content</div>
<div id="div3" class="more">Content</div>

и Javascript:

(function($) { 
 $(document).ready(function(){
    $('div.more').hide();
    $('a.plus').click(function(){
       var id = 'div' + $(this).attr('data-article');
       $('div#' + id).slideToggle();
       $(this).toggleClass("minus_icon"); 
       return false;
    });
 });
})(jQuery);

Answer 3

Дайте вашим div'ам тот же класс (например, 'div_to_toggle'), а затем вместо $ ('# div1'), $ ('# div2'), ... вы можете использовать один селектор: $ ('. Div_to_toggle' ) который выберет их все:

$('.div_to_toggle').hide();
$('.div_to_toggle').slideToggle();