Feedback
Accordion
A collection of collapsible elements.
Elements
The component is composed of multiple elements:
accordionthe wrapperaccordion__itema collapsible element, composed of a header (the trigger) and some contentaccordion__controlthe trigger element, containing some text; the expand/collapse icon is added automaticallyaccordion__contentthe content of the item, displayed when expanded
<div class="accordion">
<div class="accordion__item">
<button class="accordion__control">Accordion one</button>
<div class="accordion__content">Content one</div>
</div>
<div class="accordion__item">
<button class="accordion__control">Accordion two</button>
<div class="accordion__content">Content two</div>
</div>
</div>Content one
Content two
Properties
Add classes to the wrapper class to change the style of the component.
Size
Changes the size of the accordion (padding around elements).
class="accordion accordion--sm"
Content one
Content two
class="accordion"
Default
Content one
Content two
class="accordion accordion--lg"
Content one
Content two
Transparent
Remove the background color.
class="accordion accordion--success accordion--transparent"
Content one
Content two
Active
Add the class accordion__item--active to an accordion__item to expand it by default.
class="accordion__item accordion__item--active"
Content one
Content two