title: Keep all the Accordion options visible but open/close or collapse one at a time
body: <p>I have a custom Accordion, which has by default all the options in <strong>"Visible/Open"</strong> state.</p>
  
  <p>When I click first time, it close the particular element. But when I click it again, it open that particular element but close rest all.</p>
  
  <p><strong>It should collapse and open One element ata time.</strong></p>
  
  <p>Here is my Accordion code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id='accordionmenu' class="clear"&gt;
  &lt;ul class="grid-18"&gt;
      &lt;li class="inputRow active"&gt; &lt;a href='javascript:;'&gt;&lt;h2 class="first"&gt;Heading #1&lt;/h2&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;div class="grid-8"&gt;Content for heading 1&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="inputRow active"&gt; &lt;a href='javascript:;'&gt;&lt;h2 class="first"&gt;Heading #2&lt;/h2&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;div class="grid-8"&gt;Content for heading 2&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="inputRow active"&gt; &lt;a href='javascript:;'&gt;&lt;h2 class="first"&gt;Heading #3&lt;/h2&gt;&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;div class="grid-8"&gt;Content for heading 3&lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code> $('#accordionmenu &gt; ul &gt; li:has(ul)').addClass("has-sub");
   $('#accordionmenu &gt; ul &gt; li &gt; a').click(function () {
       var checkElement = $(this).next();
       $(this).removeClass('active');
       $(this).closest('li').addClass('active');
  
       if ((checkElement.is('ul')) &amp;&amp; (checkElement.is(':visible'))) {
           $(this).closest('li').removeClass('active');
           checkElement.slideUp('normal');
       }
  
       if ((checkElement.is('ul')) &amp;&amp; (!checkElement.is(':visible'))) {
           $('#accordionmenu ul ul:visible').slideUp('normal');
           checkElement.slideDown('normal');
       }
  
       if (checkElement.is('ul')) {
           return false;
       } else {
           return true;
       }
   });
  </code></pre>
  
  <p><strong>Here is the Fiddle for the same: <a href="http://jsfiddle.net/XLw2Z/" rel="nofollow">http://jsfiddle.net/XLw2Z/</a></strong></p>
  
  <p>Let me know if you need any other information.</p>
  
  <p>Please suggest.</p>