Accordions

This is an expanded accordion

To toggle other panes

<blaze-accordion>
  <blaze-accordion-pane open header="Click me">
    This is an expanded accordion
  </blaze-accordion-pane>
  <blaze-accordion-pane header="Click me also">
    To toggle other panes
  </blaze-accordion-pane>
  <blaze-accordion-pane header="Click me also">
    To toggle other panes
  </blaze-accordion-pane>
  <blaze-accordion-pane header="Click me also">
    To toggle other panes
  </blaze-accordion-pane>
</blaze-accordion>

CSS

Accordions are achieved by adding a modifier to a card element.

<div class="c-card c-card--accordion">
  <button role="heading" aria-expanded="true" class="c-card__control">
    Heading one
  </button>
  <section class="c-card__item c-card__item--pane">
    This is the body
  </section>
  <button role="heading" aria-expanded="false" class="c-card__control">
    Heading two
  </button>
  <section class="c-card__item c-card__item--pane">
    This is the second body
  </section>
</div>