<div class="au-accordion-group__controls">
<button class="au-accordion-group__control" onclick="return AU.accordion.Open(document.querySelector('#accordion-group-1').getElementsByClassName('js-au-accordion'))">Open all</button>
<button class="au-accordion-group__control" onclick="return AU.accordion.Close(document.querySelector('#accordion-group-1').getElementsByClassName('js-au-accordion'))">Close all</button>
</div>
<ul class="au-accordion-group au-accordion-group--flush" id="accordion-group-1">
<li>
<section class="au-accordion">
<button class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-1-1" aria-expanded="false" onclick="return AU.accordion.Toggle( this )">
Accordion group flush variant
</button>
<div class="au-accordion__body au-accordion--closed" id="accordion-1-1">
<div class="au-accordion__body-wrapper">
This accordion group removes spacing between each accordion.<br><br>Duis lacinia sed mi ornare vulputate. Nam dictum eros at orci finibus, quis porttitor ante viverra. Proin et posuere urna, ut placerat nulla. Nam iaculis commodo nulla, at eleifend urna rutrum at. Mauris id aliquet nibh, et porta quam. Cras iaculis lorem eget faucibus consectetur. Ut nec scelerisque tortor. Pellentesque consectetur massa sapien, non mattis justo hendrerit a. Nunc pulvinar nibh ut lectus
</div>
</div>
</section>
</li>
<li>
<section class="au-accordion">
<button class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-1-2" aria-expanded="false" onclick="return AU.accordion.Toggle( this )">
Accordion group flush variant
</button>
<div class="au-accordion__body au-accordion--closed" id="accordion-1-2">
<div class="au-accordion__body-wrapper">
This accordion group removes spacing between each accordion.<br><br>Duis lacinia sed mi ornare vulputate. Nam dictum eros at orci finibus, quis porttitor ante viverra. Proin et posuere urna, ut placerat nulla. Nam iaculis commodo nulla, at eleifend urna rutrum at. Mauris id aliquet nibh, et porta quam. Cras iaculis lorem eget faucibus consectetur. Ut nec scelerisque tortor. Pellentesque consectetur massa sapien, non mattis justo hendrerit a. Nunc pulvinar nibh ut lectus
</div>
</div>
</section>
</li>
<li>
<section class="au-accordion">
<button class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-1-3" aria-expanded="false" onclick="return AU.accordion.Toggle( this )">
Accordion group flush variant
</button>
<div class="au-accordion__body au-accordion--closed" id="accordion-1-3">
<div class="au-accordion__body-wrapper">
This accordion group removes spacing between each accordion.<br><br>Duis lacinia sed mi ornare vulputate. Nam dictum eros at orci finibus, quis porttitor ante viverra. Proin et posuere urna, ut placerat nulla. Nam iaculis commodo nulla, at eleifend urna rutrum at. Mauris id aliquet nibh, et porta quam. Cras iaculis lorem eget faucibus consectetur. Ut nec scelerisque tortor. Pellentesque consectetur massa sapien, non mattis justo hendrerit a. Nunc pulvinar nibh ut lectus
</div>
</div>
</section>
</li>
</ul>
The accordion group permits multiple accordions to be used together, as well as multiple accordion groups on a page.
The accordion component is wrapped in:
<ul class="au-accordion-group" id="accordion-group-X">
<li>
ACCORDION
</li>
</ul>The open/close controls are placed before the accordion group and teh JavaScript references the accordion group ID, as described above.
<div class="au-accordion-group__controls">
<button class="au-accordion-group__control" onclick="return AU.accordion.Open(document.querySelector('#accordion-group-X').getElementsByClassName('js-au-accordion'))">Open all</button>
<button class="au-accordion-group__control" onclick="return AU.accordion.Close(document.querySelector('#accordion-group-X').getElementsByClassName('js-au-accordion'))">Close all</button>
</div>To ensure that controls do not operate the equivalent accordion across groups, use unique IDs on the accordion body and match aria-control references.
For example accordion-1-1 below:
<section class="au-accordion">
<button class="au-accordion__title js-au-accordion au-accordion--closed" aria-controls="accordion-1-1"
aria-expanded="false" onclick="return AU.accordion.Toggle( this )">
TITLE
</button>
<div class="au-accordion__body au-accordion--closed" id="accordion-1-1">
<div class="au-accordion__body-wrapper">
BODY CONTENTS
</div>
</div>
</section>Whilst the behaviour of accordion groups is consistent across types, the following variants exist to suit applications.
Note that variant classes should be applied to the .au-accordion-group. Accordion variant classes are applied to the au.accordion elements directly.
Standard group behaviours and styles
The accordions are grouped togther without spacing. This is particularly suited to applications and can be extended to include rows/tablular data or similar.
The following CSS custom variables allow customisation: