Recursive Accordion

[carddamom]

Is there any way to make a recursive accordion menu?

[alanbec]

+1

I am trying to have a two level system, outer accordion allows one to open one of several children, each child is an accordion, click one and it's content becomes visible.

Right now I am attempting to nest instances of this accordion and the result is duplicated H2s of the selected inner accordion (following default code supplied).

Reading

1st of January, 2018: fixed multiple issues when nested accordions, thanks to a fantastic work made by Yvain Liechti.

made me optimistic (still does) that this is possible.

Here's hoping because I love the deep a11y approach this accorion takes.

Code sample:

<div class="0-js-accordion" data-accordion-multiselectable="none" data-accordion-prefix-classes="minimalist-accordion">
  <div class="js-accordion__panel">
    <h2 class="js-accordion__header">Accounting Operations Headquarters</h2>

      <!-- child accordion -->
      <div class="1-js-accordion" data-accordion-multiselectable="none" data-accordion-prefix-classes="inner-accordion">
        <div class="js-accordion__panel">
          <h2 class="js-accordion__header">Corporate card</h2>
          <p>Content of 1st tab</p>
        </div>
        <div class="js-accordion__panel">
          <h2 class="js-accordion__header">Hospitality event</h2>
          <p>Content of 2nd tab</p>
        </div>
        <div class="js-accordion__panel">
          <h2 class="js-accordion__header">Taxi</h2>
          <p>Content of 3rd tab</p>
        </div>
      </div>
      <!-- /child accordion -->

  </div>
  <div class="js-accordion__panel">
    <h2 class="js-accordion__header">Accounting Operations Field Services</h2>

      <!-- child accordion -->

You can see I have been hacking about with class names in case the duplication came from that, no luck so far :/

[nico3333fr]

Hi there,

in fact, there are bugs in case of nested accordions, if you call them with the same parameters. :-\ I guess I will have to fix this asap.

However, there is a temporary workaround, call the plugin with different parameters for the nested accordion:

<div class="js-accordion" data-accordion-prefix-classes="your-prefix-class">
 <div class="js-accordion__panel">
   <h2 class="js-accordion__header">First tab</h2>
   <p>Content of 1st tab</p>
 </div>
 <div class="js-accordion__panel">
   <h2 class="js-accordion__header">Second tab</h2>
   <p>Content of 2nd tab</p>
 </div>
 <div class="js-accordion__panel">
   <h2 class="js-accordion__header">Third tab</h2>
   <p>Content of 3rd tab</p>

  <div class="js-accordion2" data-accordion-prefix-classes="minimalist-accordion">
   <div class="js-accordion2__panel">
     <h3 class="js-accordion2__header">First tab</h3>
     <p>Content of 1st tab</p>
   </div>
   <div class="js-accordion2__panel">
     <h2 class="js-accordion2__header">Second tab</h2>
     <p>Content of 2nd tab</p>
   </div>
   <div class="js-accordion2__panel">
     <h2 class="js-accordion2__header">Third tab</h2>
     <p>Content of 3rd tab</p>
   </div>
  </div>

 </div>
</div>

and for JS:

$(function () {
   $('.js-accordion').accordion();
   $('.js-accordion2').accordion({
   headersSelector: '.js-accordion2__header',
        panelsSelector: '.js-accordion2__panel',
        buttonsSelector: 'button.js-accordion2__header',
        buttonsGeneratedContent: 'text',
        button: $('<button></button>', {
            class: 'js-accordion2__header',
            type: 'button'
        })
   });
});

it seems to prevent the problem. Could you test?

[alanbec]

Could you test?

Happily.

It looks like it is almost working, but not quite. This is the code I have

/* HTML*/
/* Exactly per your suggestion */

/* CSS */
.your-prefix-class__panel[aria-hidden=true] {
  display: none;
}

.your-prefix-class__header {
  display: block;
}

/* title opened */
.your-prefix-class__header[aria-expanded="true"]:before {
  content: "- ";
}
/* title closed */
.your-prefix-class__header[aria-expanded="false"]:before {
  content: "+ ";
}

/* title selected */
.your-prefix-class__header[aria-selected="true"]:after {
  content: " (sel)";
}
/* title non selected */
.your-prefix-class__header[aria-selected="false"]:after {
  content: " (unselc)";
}

/* jQ */
$(function () {
   $('.js-accordion').accordion();
   $('.js-accordion2').accordion({
   headersSelector: '.js-accordion2__header',
        panelsSelector: '.js-accordion2__panel',
        buttonsSelector: 'button.js-accordion2__header',
        buttonsGeneratedContent: 'text',
        button: $('<button></button>', {
            class: 'js-accordion2__header',
            type: 'button'
        })
   });
});

First Second and Third tabs work, but when Third tab is expanded it's children are just stuck open:

Using v 2.5.2 of index.js.

Hope this helps.

[alanbec]

Uh, that was because I had CSS only for the top accordion, retesting now...

[alanbec]

It is now working, with the extra CSS below.

Thank you!

Request: Can I easily change settings in order that when I close a top-level item, reopening it I will find all it's nested accordion items re-collapsed regardless of what children items I had previously opened?

My two HTML accordion lines open like this:

<div class="js-accordion" data-accordion-multiselectable="none" data-accordion-prefix-classes="your-prefix-class">
.
.
.
<div class="js-accordion2" data-accordion-multiselectable="none" data-accordion-prefix-classes="minimalist-accordion">

i.e. I have added the data-accordion-multiselectable="none" attribute.