title: jquery toggle won't close on click
body: <p>I have this code for an accordion style toggle. Works great, only problem is, if you click on an open accordion, it slides up then back down. It doesn't slide closed. </p>
  
  <p>Any thoughts?</p>
  
  <p>Thanks!</p>
  
  <pre><code>//toggles 2
  $('body').on('click','.toggle h3 a', function(){
  
      if($(this).parents('.toggles').hasClass('accordion')) return false;
  
      $(this).parents('.toggles').find('.toggle &gt; div').slideUp(300);
      $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign');
      $(this).parents('.toggles').find('.toggle').removeClass('open');
  
      $(this).parents('.toggle').find('&gt; div').slideDown(300);
      $(this).parents('.toggle').addClass('open');
  
      //switch icon
      if( $(this).parents('.toggle').hasClass('open') ){
          $(this).find('i').attr('class','icon-minus-sign');
      } else {
          $(this).find('i').attr('class','icon-plus-sign');
      }
  
      return false;
  });
  
  
  
  &lt;div class="toggles"&gt;
  
  &lt;div class="toggle accent-color"&gt;&lt;h3&gt;&lt;a href="#"&gt;&lt;i class="icon-minus-sign"&gt;&lt;/i&gt;First Accord&lt;/a&gt;&lt;/h3&gt;
      &lt;div&gt;
      Content
      &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;div class="toggle accent-color"&gt;&lt;h3&gt;&lt;a href="#"&gt;&lt;i class="icon-minus-sign"&gt;&lt;/i&gt;Second Accord&lt;/a&gt;&lt;/h3&gt;
      &lt;div&gt;
      Content
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p></p>