Question

Am toggling few div’s on my website which are looped using PHP, now what the issue is am passing div id, but this will make 10 scripts if am looping 10 articles, any better way to pass an id and open the associated div?

http://jsfiddle.net/NbGSB/

<script>
$('#toggle4').click(function() {
$('.toggle4').slideToggle('fast');
    return false;
});
</script>
<a href="#" id="toggle4">Slide Toggle</a><br /><br />
<div class="toggle4" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

Now what if am having multiple div’s? do I need to pass the id always and loop the script too or is there any better way? sorry but am not good with jQuery

Answer 1

Yes, just give to your articles one class, like a “arcticle-toggle”, then slide div after two br-tags:
HTML:

<a href="#" class="article-toggle">Slide Toggle 1</a><br /><br />
<div style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

<a href="#" class="article-toggle">Slide Toggle 2</a><br /><br />
<div style="display:none; background-color:#8CF;width:100px;height:200px;"></div>

​JS:

<script>
 $('.article-toggle').click(function() {
  $(this).next().next().next().slideToggle('fast');
 return false;
}
</script>

Fiddle.