<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 title
</button>
<div class="au-accordion__body au-accordion--closed" id="accordion-1-1">
<div class="au-accordion__body-wrapper">
Contents of the accordion body. Duis lacinia sed mi ornare <a href='#'>vulputate</a>. 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 lacinia pharetra.
</div>
</div>
</section>
The accordion is based on the GOLD Design System Accordion.
Accordions can be implementated:
Whilst the behaviour of accordions is consistent across types, the following variants exist to suit applications.
The following should be applied to the .au-accordion as they may be delivered singularly. Variatn must no be mixed within a group.
The default accordion including default colour, border and font size.
Removes the colour and bottom padding from the accordion title so that the title and body appear as a single unit.
Adds the default shadow.
Reduces font size and padding.
The following CSS custom variables allow customisation: