title: Nested accordion menu in jQuery
body: <p>I have a menu implemented using a set of nested accordions, <code>1</code> and <code>2</code>, each with elements, <code>a</code> and <code>b</code>.</p>
  <p>I would like to implement the following logic:</p>
  <ul>
  <li><p>When I click <code>1a</code>, I will get the data of <code>1a</code> and two submenu <code>2a</code>,<code>2b</code></p>
  </li>
  <li><p>When I click <code>2a</code>, <code>2b</code> I will get the data of each, respectively.</p>
  </li>
  </ul>
  <p><strong>The problem</strong></p>
  <p>Desired result:</p>
  <ul>
  <li>I only want to display the <code>nth-most</code> child element for the last click, collapsing all others.</li>
  <li>Upon initialization, only <code>1a</code> and <code>1b</code> should be visible.</li>
  </ul>
  <p>Current result:</p>
  <ul>
  <li>Clicking on <code>1b</code>, then on <code>2b</code>, <code>1b</code> is still fully visible.</li>
  </ul>
  <h3>JavaScript code</h3>
  <pre><code>$(document).ready(function() {
      $(&quot;#acc1&quot;).accordion({
          active:&quot;.ui-accordion-left&quot;,
          alwaysOpen: false,
          autoheight: false,
          header: 'a.acc1',
          clearStyle: true
      });
      $(&quot;#acc2&quot;).accordion({
          alwaysOpen: false,
          autoheight: false,
          header: 'a.acc2',
          clearStyle: true
      });
  });
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;ul id=&quot;acc1&quot; class=&quot;ui-accordion-container&quot;&gt;
      &lt;li&gt;
          &lt;div class=&quot;ui-accordion-left&quot;&gt;&lt;/div&gt;
          &lt;a class=&quot;ui-accordion-link acc1&quot;&gt;1a
              &lt;span class=&quot;ui-accordion-right&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;div&gt;
              data of 1a&lt;br/&gt;
              data of 1a&lt;br/&gt;
              data of 1a&lt;br/&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;ul class=&quot;ui-accordion-container&quot; id=&quot;acc2&quot;&gt;
                  &lt;li&gt;
                      &lt;div class=&quot;ui-accordion-left&quot;&gt;&lt;/div&gt;
                      &lt;a class=&quot;ui-accordion-link acc2&quot;&gt;2a
                          &lt;span class=&quot;ui-accordion-right&quot;&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;div&gt;
                          data of 2a&lt;br/&gt;
                          data of 2a&lt;br/&gt;
                          data of 2a&lt;br/&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div class=&quot;ui-accordion-left&quot;&gt;&lt;/div&gt;
                      &lt;a class=&quot;ui-accordion-link acc2&quot;&gt;2b
                          &lt;span class=&quot;ui-accordion-right&quot;&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;div&gt;
                          data of 2b&lt;br/&gt;
                          data of 2b&lt;br/&gt;
                          data of 2b&lt;br/&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class=&quot;ui-accordion-left&quot;&gt;&lt;/div&gt;
          &lt;a class=&quot;ui-accordion-link acc1&quot;&gt;1b
              &lt;span class=&quot;ui-accordion-right&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;div&gt;
              data of 1b&lt;br /&gt;
              data of 1b&lt;br /&gt;
              dta of 1b &lt;br /&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>