title: Jquery to expand collapse only the div that has been clicked
body: <p>I have a number of divs on a page that i want to collapse and expand when the user clicks "Expand [+]"</p>
  
  <p>The following code works for one div</p>
  
  <pre><code>&lt;h4 class="expanderHead" style="cursor:pointer;"&gt;Contact information &lt;span class="expanderSign"&gt;Expand [+]&lt;/span&gt;&lt;/h4&gt;
  &lt;div id="profile-section" style="overflow:hidden;"&gt;
  some stuff
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function(){
  jQuery(".expanderHead").click(function(){
      if (jQuery(".expanderSign").text() == "Expand [+]")
      {
      jQuery("#profile-section").removeClass("height-min");
      jQuery("#profile-section").addClass("height-auto");
      }
      else
      {
      jQuery("#profile-section").removeClass("height-auto");
      jQuery("#profile-section").addClass("height-min");
      }
  
      if (jQuery(".expanderSign").text() == "Expand [+]"){
          jQuery(".expanderSign").text("Collapse [-]");
      }
      else {
          jQuery(".expanderSign").text("Expand [+]");
      }
  
  
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>If i then have a number of divs on the page as such</p>
  
  <pre><code>&lt;h4 class="expanderHead" style="cursor:pointer;"&gt;Contact information &lt;span class="expanderSign"&gt;Expand [+]&lt;/span&gt;&lt;/h4&gt;
  &lt;div id="profile-section1" style="overflow:hidden;"&gt;
  some stuff
  &lt;/div&gt;
  
  &lt;h4 class="expanderHead" style="cursor:pointer;"&gt;Contact information &lt;span class="expanderSign"&gt;Expand [+]&lt;/span&gt;&lt;/h4&gt;
  &lt;div id="profile-section2" style="overflow:hidden;"&gt;
  some stuff
  &lt;/div&gt;
  
  &lt;h4 class="expanderHead" style="cursor:pointer;"&gt;Contact information &lt;span class="expanderSign"&gt;Expand [+]&lt;/span&gt;&lt;/h4&gt;
  &lt;div id="profile-section3" style="overflow:hidden;"&gt;
  some stuff
  &lt;/div&gt;
  
  etc....
  </code></pre>
  
  <p>How can i modify my jquery so that it works for all of these divs individually. i.e it will only minimize or maximize the div that has been clicked?</p>
  
  <p>i've tried a number of different combinations using (this) and parent() and child() but i can't seem to get it right.</p>
  
  <p>Help would be appreciated :)</p>