title: jquery show / hide accordion - close open item if open
body: <p>Ok so that might be a confusing title, essentially I have made a FAQ show/hide function, which will close any open items, and then open the item you just clicked on. However, I need it to close the item you have open, if you click on it's title again (if that makes sense?)</p>
  
  <pre><code>&lt;div class="faq"&gt;
    &lt;hr /&gt;
    &lt;h3&gt;&lt;a href="#item-1"&gt;question 1&lt;/a&gt;&lt;/h3&gt;
    &lt;div id="item-1" class="items"&gt;
      answer 1
    &lt;/div&gt;
    &lt;hr /&gt;
    &lt;h3&gt;&lt;a href="#item-2"&gt;question 2&lt;/a&gt;&lt;/h3&gt;
    &lt;div id="item-2" class="items"&gt;
      answer 2
    &lt;/div&gt;
    &lt;hr /&gt;
    &lt;h3&gt;&lt;a href="#item-3"&gt;question 3&lt;/a&gt;&lt;/h3&gt;
    &lt;div id="item-3" class="items"&gt;
      answer 3
    &lt;/div&gt;
    &lt;hr /&gt;
    &lt;h3&gt;&lt;a href="#item-4"&gt;question 4&lt;/a&gt;&lt;/h3&gt;
    &lt;div id="item-4" class="items"&gt;
      answer 4
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
      $('.faq h3 a:not(.open)').click(function(e){
          e.preventDefault();
          $(this).addClass('open');
          var faq = $.attr(this,'href').substr(1);
          $('.faq .items').slideUp('fast');
          $('.faq #'+faq).slideDown('fast',function(){
              $('html,body').animate({scrollTop:$('[id="'+faq+'"]').offset().top-60},750);
          });
      });
      $('.faq h3 a.open').click(function(e){
          e.preventDefault();
          $('.faq .items').slideUp('fast');
          $(this).removeClass('open');
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>So if I clicked on question 3, it opens, and if I click on it again, it closes. But if I click on question 2, it closes question 3 and opens question 2.</p>
  
  <p>I tried adding an open class, but it's ignoring it.</p>