Question

ASP.Net, 2.0 VS2005, .Net 2.0 jQuery 1.8.3, jQuery UI 1.9.2

I have two panels (more will come later on) on my form that can be open or closed at the users request.

i am using the jQuery ‘.slideToggle’ method.

This is my markup

<div class="trigger0">Collapsible Header 1 - Click to toggle</div>
            <div class="panel0">
                content 1
            </div>
           <div class="trigger1">Collapsible Header 2 - Click to toggle</div>
            <div class="panel1">
                content 2
            </div>

The following works fine

$(document).ready(function() {
        $(".trigger0").click(function(){
            $(".panel0").slideToggle("medium");
        });
        $(".trigger1").click(function() {
            $('.panel1').slideToggle("medium");
        });
    });      

but this doesn’t

$(document).ready(function() {
        for (var vReportSectionCount = 0; vReportSectionCount < 2; vReportSectionCount++)
        {
            $(".trigger" + vReportSectionCount).click(function(){
                $(".panel" + vReportSectionCount).slideToggle("medium");
            });
        }
    });

As i dont yet know how many panels will finally exist i dont want to have to write a new line for every panel. Can someone explain to me why and propose a better solution?

Answer 1

Could this be something you’re looking for? This lets you name the classes as classes and not ID’s

HTML

<div class="trigger">Collapsible Header 1 - Click to toggle</div>
<div class="panel">
    content 1
</div>

<div class="trigger">Collapsible Header 2 - Click to toggle</div>
<div class="panel">
    content 2
</div>

Javascript

$(document).ready(function() {
    $(".trigger").click(function(){
        $(this).next(".panel").slideToggle("medium");
    });
});

You can see a demo here: http://jsfiddle.net/LkTf8/1/