Default example

Single accordion open fast by default

Item content 1

Accordion group

Item content 2
Item content 3
Item content 4
Alt example

Single accordion open fast by default

Item content 1

Accordion group

Item content 2
Item content 3
Item content 4
Dark example

Single accordion open fast by default

Item content 1

Accordion group

Item content 2
Item content 3
Item content 4
Dark alt example

Single accordion open fast by default

Item content 1

Accordion group

Item content 2
Item content 3
Item content 4
Markup: uikit/accordion/accordion.twig
<h3>Single accordion open fast by default</h3>
{%
  include '@govcms8_uikit/accordion/accordion.twig' with {
  id: id_1,
  title: title_1,
  body: body_1,
  orientation: orientation_1,
  speed: speed_1
} only
%}

<h3>Accordion group</h3>

<button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Open( document.querySelectorAll('.accordion-group .au-accordion__title') )">Open All</button>
<button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Close( document.querySelectorAll('.accordion-group .au-accordion__title') )">Close All</button>
<button class="au-btn au-btn--secondary accordion-group__control" onclick="return AU.accordion.Toggle( document.querySelectorAll('.accordion-group .au-accordion__title') )">Toggle All</button>

<div class="accordion-group">
  {%
    include '@govcms8_uikit/accordion/accordion.twig' with {
    id: id_2,
    title: title_2,
    body: body_2,
    orientation: orientation_2,
    speed: speed_2
  } only
  %}
  {%
    include '@govcms8_uikit/accordion/accordion.twig' with {
    id: id_3,
    title: title_3,
    body: body_3,
    orientation: orientation_3,
    speed: speed_3
  } only
  %}
  {%
    include '@govcms8_uikit/accordion/accordion.twig' with {
    id: id_4,
    title: title_4,
    body: body_4,
    orientation: orientation_4,
    speed: speed_4
  } only
  %}
</div>
Source: assets/scss/uikit/accordion/_accordion.scss, line 1