title: jQuery Collapsible Panel
body: <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>