<section class="au-accordion au-accordion--shadow">
<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 shadow variant
</button>
<div class="au-accordion__body au-accordion--closed" id="accordion-1-1">
<div class="au-accordion__body-wrapper">
This accordion add the default shadow to make it more prominent.<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>
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: