title: Close accordions if other accordion is open in jQuery
body: <p>I have multiple jQuery accordions on one page all with different id's etc.. I'm attempting to only allow one accordion to open at a time. For example the user opens one and then goes on to  a different accordion and the new one opens as the one that user was just using closes.</p>
  <p>is there anyway of doing this?</p>
  <p>Below is an example of one accordion.... they all look the same at the moment.</p>
  <pre><code>&lt;div id=&quot;accordion&quot;&gt;
  
  
  &lt;h3 class=&quot;one&quot; href=&quot;#section1&quot;&gt;Location&lt;/a&gt;&lt;/h3&gt;
  &lt;div class=&quot;tab1&quot;&gt;
   
      &lt;form class=&quot;myform&quot;&gt;
      &lt;label&gt;&lt;b&gt;Weeks&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;allweeks&quot; /&gt; &lt;label for = &quot;allweeks&quot;&gt;All Weeks&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w1&quot; /&gt; &lt;label for = &quot;w1&quot;&gt;Week 1&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w2&quot; /&gt; &lt;label for = &quot;w2&quot;&gt;Week 2&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w3&quot;  /&gt; &lt;label for = &quot;w3&quot;&gt;Week 3&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w4&quot; /&gt; &lt;label for = &quot;w4&quot;&gt;Week 4&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w5&quot; /&gt; &lt;label for = &quot;w5&quot;&gt;Week 5&lt;/label&gt;&lt;/br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w6&quot;  /&gt; &lt;label for = &quot;w6&quot;&gt;Week 6&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w7&quot; /&gt; &lt;label for = &quot;w7&quot;&gt;Week 7&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w8&quot; /&gt; &lt;label for = &quot;w8&quot;&gt;Week 8&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w9&quot; /&gt; &lt;label for = &quot;w9&quot;&gt;Week 9&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w10&quot;  /&gt; &lt;label for = &quot;w10&quot;&gt;Week 10&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w11&quot;  /&gt; &lt;label for = &quot;w11&quot;&gt;Week 11&lt;/label&gt;&lt;br&gt;
          &lt;input type = &quot;checkbox&quot; id = &quot;w12&quot;  /&gt; &lt;label for = &quot;w12&quot;&gt;Week 12&lt;/label&gt;&lt;br&gt;
      
              
       &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>These are the scripts i'm using at the moment</p>
  <pre><code>    &lt;script&gt;
  
  
  $(function() {
      $( &quot;#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5&quot; ).accordion();
      
  
  });
  
  
  $(function() {
      var icons = {
          header: &quot;ui-icon-circle-arrow-e&quot;,
          headerSelected: &quot;ui-icon-circle-arrow-s&quot;
      };
      $( &quot;#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5&quot; ).accordion({
          icons: icons,
          collapsible: true
      });
      $( &quot;#toggle&quot; ).button().toggle(function () {
          $( &quot;#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5&quot; ).accordion( &quot;option&quot;, &quot;icons&quot;, false );
      }, function () {
          $( &quot;#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5&quot; ).accordion( &quot;option&quot;, &quot;icons&quot;, icons );
      });
  });
  
  
  $(function() {
  $(&quot;#accordion,#accordion1,#accordion2,#accordion3,#accordion4,#accordion5&quot;).accordion({ header: &quot;h3&quot;, collapsible: true, active: false }); });
  
  &lt;/script&gt;
  </code></pre>