title: jquery toggle accordian without plugin
body: <p>Hi have two content sections and i only want 1 open at a time. They both collapse and open based on clicking the headings. I have it currently working where they are independent of each other but i am looking to have them hide the other when it is shown. I dont want to have to use the plugin for jquery accordion.</p>
  
  <p>here is the code i have now:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="topCats"&gt;
      &lt;h4&gt;&lt;a href="#" class="openBox"&gt;Most Searched Categories&lt;/a&gt;&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="topCatsContainer"&gt;
     content 1
  &lt;/div&gt;
  &lt;div class="allCats"&gt;
      &lt;h4&gt;&lt;a href="#" class="closed"&gt;All Categories&lt;/a&gt;&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="allCatsContainer"&gt;
     content 2
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#allCatsContainer').css("display", "none");
  $('.topCats h4 a').click( function() {
      $('#topCatsContainer').slideToggle(500);
          $(this).toggleClass("openBox");
  });
  
  $('.allCats h4 a').click( function() {
      $('#allCatsContainer').slideToggle(500);
      $(this).toggleClass("openBox");                                                                     
  });
  </code></pre>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks</p>