Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Examples

Accordion

Accordion with multiple items.

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that matches the other components' aesthetic.

Code

<wdc-accordion>
  <wdc-accordion-item [open]="true">
    <div accordion-header>Accordion Item #1</div>
    <div accordion-body>Accordion Body #1</div>
  </wdc-accordion-item>
  <wdc-accordion-item>
    <div accordion-header>Accordion Item #2</div>
    <div accordion-body>Accordion Body #2</div>
  </wdc-accordion-item>
</wdc-accordion>

API Reference

Input	Type	Default	Description
open	boolean	false	Whether the accordion item is open or not.
noPaddingBody	boolean	false	Whether to remove padding from the accordion body.
customActions	boolean	false	Whether to display custom actions in the accordion header.