title: Expending and Collapsing
body: <p>I have 1 session of collapse and expend with JavaScript.  It works very well.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h4 id="expanderHead" style="cursor:pointer;"&gt;
      EXPANDING COLLAPSING DIV &lt;span id="expanderSign"&gt;+&lt;/span&gt;
  &lt;/h4&gt;
  &lt;div id="expanderContent" style="display:none"&gt;
      content&lt;br /&gt;
      content&lt;br /&gt;
      content&lt;br /&gt;
      content&lt;br /&gt;
      content&lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $("#expanderHead").click(function(){
          $("#expanderContent").slideToggle();
          if ($("#expanderSign").text() == "+"){
              $("#expanderSign").html("−")
          }
          else {
              $("#expanderSign").text("+")
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And then I add one or more sessions of collapse and expend, they don't work.  I change ID to CLASS, I click on one, it expends all (because it is the same class name).  If I keep the same ID, only the first one works.  Any way to get it work? </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h4 class="expanderHead" style="cursor:pointer;"&gt;
      EXPANDING COLLAPSING DIV &lt;span id="expanderSign"&gt;+&lt;/span&gt;
  &lt;/h4&gt;
  &lt;div class="expanderContent" style="display:none"&gt;
      content&lt;br /&gt;
      content&lt;br /&gt;
      content&lt;br /&gt;
      content&lt;br /&gt;
      content&lt;br /&gt;
  &lt;/div&gt;
  
  
  
  &lt;h4 class="expanderHead" style="cursor:pointer;"&gt;
          EXPANDING COLLAPSING DIV &lt;span id="expanderSign"&gt;+&lt;/span&gt;
      &lt;/h4&gt;
      &lt;div class="expanderContent" style="display:none"&gt;
          content&lt;br /&gt;
          content&lt;br /&gt;
          content&lt;br /&gt;
          content&lt;br /&gt;
          content&lt;br /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $(".expanderHead").click(function(){
          $(".expanderContent").slideToggle();
          if ($("#expanderSign").text() == "+"){
              $("#expanderSign").html("−")
          }
          else {
              $("#expanderSign").text("+")
          }
      });
  });
  &lt;/script&gt;
  </code></pre>