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>