How to make jQuery slidetoggle effect for multiple div on same page?

Question

it works fine for one div

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

How to make this slide toogle effect for multiple div on same page? I have multiple divs with different id to hide like #div1, #div2, div#3.

edit:

This is situation in 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

Give your divs the same class (like 'div_to_toggle') and then instead of $('#div1'), $('#div2'), ... you can use one selector: $('.div_to_toggle') that will select them all:

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

Answer 2

Presuming your HTML is something like this:

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

Then having a function like this will work for as many a.plus / div pairs you have:

(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);

If your a.mores are, for whatever reason, nowhere near the divs themselves, you will have to set an attribute on the a.more to link it to a div, eg. (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>

and 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

Hi!

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