title: Toggle an Accordion with JQuery
body: <p>I had an accordion given to me that is not toggling each tab open and close.  It only closes the tab when <em>another</em> title is selected, but I'd like the ability for the user to close it on click as well. I'm not sure how to edit this Jquery to allow this to happen.  </p>
  
  <pre><code>jQuery("ul.gdl-accordion li").each(function(){
      jQuery(this).children(".accordion-content").css('height', function(){ 
          return jQuery(this).height(); 
      });
      if(jQuery(this).index() &gt; 0){
          jQuery(this).children(".accordion-content").css('display','none');
      }else{
          jQuery(this).find(".accordion-head-image").addClass('active');
      }       
  
      jQuery(this).children(".accordion-head").bind("click", function(){
          jQuery(this).children().addClass(function(){
              if(jQuery(this).hasClass("active")) return "";
              return "active";
          });
          jQuery(this).siblings(".accordion-content").slideDown();
          jQuery(this).parent().siblings("li").children(".accordion-content").slideUp();          jQuery(this).parent().siblings("li").find(".active").removeClass("active");
      });
  });
  </code></pre>
  
  <p>I'm assuming it's somewhere in the <code>.click</code> function, in that <code>if</code> statement... but I'm not sure why.</p>
  
  <p>I'm also not sure why it is defaulting the first tab as open... is there a way to modify that as well?</p>
  
  <p><a href="http://jsfiddle.net/FKAAM/" rel="nofollow">http://jsfiddle.net/FKAAM/</a></p>
  
  <p>Any advice is greatly appreciated.  Many thanks SO. </p>