title: Using JQuery to toggle div visibility
body: <p>I'm writing some jquery code to toggle a Div visibility.  I followed the method posted here: <a href="http://jsfiddle.net/Ga7Jv/" rel="noreferrer">http://jsfiddle.net/Ga7Jv/</a>.</p>
  
  <p>When the user clicks an image (next to a H2 tag) i want it to toggle the div.</p>
  
  <p>Here is the Jquery:</p>
  
  <pre><code>$(function()
  {
  $(".expander").live('click', function(){
          $(this).next("#TableData").slideDown();
          $(this).removeClass('expander');
          $(this).addClass('expanded');
  });
  
  $(".expanded").live('click', function(){
          $(this).next("#TableData").slideUp();
          $(this).removeClass('expanded');
          $(this).addClass('expander');
  });
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;h3&gt;&lt;img src="toggle.png" class ="expander" alt="Expand"/&gt; 
  Tabular Data&lt;/h3&gt;
  &lt;div id="TableData"&gt;
  //Content
  &lt;/div&gt;
  </code></pre>
  
  <p>The is css applied to the class expander and when i click the button it appears that the css changes, as i would expect.  So i assume the code is finding the toggle button and switching out the classes alright.</p>
  
  <p>However it doesn't perform the action i need, which is to slide the div up or down depending on that class.</p>
  
  <p>The other way i've tried to achieve this is with this:</p>
  
  <pre><code>  $(function(){
       $('.expander').live('click',function(){
       $('#TableData').show();
       $('#TableData').hide();
          });
  </code></pre>
  
  <p>This only closes the div and does not open again when i click it.  I've also had it so it closes fine but when i open it, it immediately closes again.</p>
  
  <p>Thanks</p>