I have a menu implemented using a set of nested accordions, 1 and 2, each with elements, a and b.
I would like to implement the following logic:
-
When I click
1a, I will get the data of1aand two submenu2a,2b -
When I click
2a,2bI will get the data of each, respectively.
The problem
Desired result:
- I only want to display the
nth-mostchild element for the last click, collapsing all others. - Upon initialization, only
1aand1bshould be visible.
Current result:
- Clicking on
1b, then on2b,1bis still fully visible.
JavaScript code
$(document).ready(function() { $("#acc1").accordion({ active:".ui-accordion-left", alwaysOpen: false, autoheight: false, header: 'a.acc1', clearStyle: true }); $("#acc2").accordion({ alwaysOpen: false, autoheight: false, header: 'a.acc2', clearStyle: true }); }); HTML:
<ul id="acc1" class="ui-accordion-container"> <li> <div class="ui-accordion-left"></div> <a class="ui-accordion-link acc1">1a <span class="ui-accordion-right"></span> </a> <div> data of 1a<br/> data of 1a<br/> data of 1a<br/> </div> <div> <ul class="ui-accordion-container" id="acc2"> <li> <div class="ui-accordion-left"></div> <a class="ui-accordion-link acc2">2a <span class="ui-accordion-right"></span> </a> <div> data of 2a<br/> data of 2a<br/> data of 2a<br/> </div> </li> <li> <div class="ui-accordion-left"></div> <a class="ui-accordion-link acc2">2b <span class="ui-accordion-right"></span> </a> <div> data of 2b<br/> data of 2b<br/> data of 2b<br/> </div> </li> </ul> </div> </li> <li> <div class="ui-accordion-left"></div> <a class="ui-accordion-link acc1">1b <span class="ui-accordion-right"></span> </a> <div> data of 1b<br /> data of 1b<br /> dta of 1b <br /> </div> </li> </ul>
Just a few changes to the order of the elements in your HTML and you get the behavior you are looking for. At the start now only 1a and 1b are open. Similarly when you click on 1b now it will close 1a which will hide any open 2a/2b section as well.