Accordion v2

Stacked, expandable content sections.

Dependencies

• Accordion

How to

The Accordion v2 component is a variation of the Accordion component.

You can edit the following data attributes to affect the component behavior:

• data-animation: animate height of the content items when expanding/collapsing them; value 'on'/'off'; default value = off.
• data-multi-items: allow multiple accordion items to be open at the same time; value 'on'/'off'; default value = 'on'.

data-version="v2" #

This component uses the same JavaScript of the Accordion component. Because some classes are created/toggled in JS, the data-version attribute is added to make sure the prefix of these classes is correct: e.g., if in the original accordion component the class toggled was .accordion__item--is-open, the data-version="v2" makes sure the class toggled is .accordion-v2__item--is-open.

Categories

• Data Display > Accordion

Bug report & feedback

Component Github page ↗