title: Toggle not working
body: <p>I have a set of div pairs (a 'header' and a 'body'). When the user clicks on the header, the next body section should show/hide (and update the +/- icon). All the divs are written to be "shown" on page load but I'd like to "close" some of them and the user can open them if they wish. Just can't get it to work! Code is below if anyone can help!</p>
  
  <p>Sample section:</p>
  
  <pre><code>  &lt;div class="expandingSection_head" id="expanderAI"&gt;
        &lt;img class="imgExpand" src="../images/treeExpand_plus.gif" /&gt;
            Header text here
    &lt;/div&gt;
    &lt;div class="expandingSection_body"&gt;
        body text here
    &lt;/div&gt;
    ...more pairs of divs like this on rest of page...
  </code></pre>
  
  <p>Code to toggle:</p>
  
  <pre><code>    $(".expandingSection_head").toggle(
      function() {
          $(this).css('background-color', '#6BA284');
          $(this).find('.imgExpand').attr('src', '../images/treeExpand_plus.gif');
          $(this).next(".expandingSection_body").slideUp(400);
      },
      function() {
          $(this).css('background-color', '#6BA284');
          $(this).find('.imgExpand').attr('src', '../images/treeExpand_minus.gif');
          $(this).next(".expandingSection_body").slideDown(400);
      });
  
      $("#expanderAI").toggle();
  </code></pre>
  
  <p>This last line doesn't "toggle" the specified div (i.e. "close" it). Anyone know why? Probably something simple.</p>
  
  <p>Thanks!</p>