jQuery Collapsible Panel
<p>ASP.Net, 2.0 VS2005, .Net 2.0 jQuery 1.8.3, jQuery UI 1.9.2</p>

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

<p>i am using the jQuery '.slideToggle' method.</p>

<p>This is my markup</p>

<pre><code>&lt;div class="trigger0"&gt;Collapsible Header 1 - Click to toggle&lt;/div&gt;
            &lt;div class="panel0"&gt;
                content 1
            &lt;/div&gt;
           &lt;div class="trigger1"&gt;Collapsible Header 2 - Click to toggle&lt;/div&gt;
            &lt;div class="panel1"&gt;
                content 2
            &lt;/div&gt;
</code></pre>

<p>The following works fine</p>

<pre><code>$(document).ready(function() {
        $(".trigger0").click(function(){
            $(".panel0").slideToggle("medium");
        });
        $(".trigger1").click(function() {
            $('.panel1').slideToggle("medium");
        });
    });      
</code></pre>

<p>but this doesn't</p>

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

<p>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?</p>
