Accordion v0.4.0+

Basic Accordion

A basic accordion will allow a user to expand and collapse as many panels as desired.

Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie apple pie chupa chups. Lemon drops caramels sugar plum.

<hx-accordion>
  <hx-accordion-panel open>
    <header slot="header">Cupcake Ipsum</header>
    <div class="hxBox hxMd">
      <!-- body content goes here -->
    </div>
  </hx-accordion-panel>
  <hx-accordion-panel>...</hx-accordion-panel>
  <hx-accordion-panel open>...</hx-accordion-panel>
</hx-accordion>

Single Panel Accordion

By setting the current-panel attribute on an accordion, it will be placed into "single-panel" mode. In this configuration, a user will only be able to expand one panel at a time.

Sweet toffee pie icing croissant halvah chupa chups. Cotton candy pie sesame snaps. Muffin sesame snaps cake toffee liquorice apple pie apple pie chupa chups. Lemon drops caramels sugar plum.

<hx-accordion current-panel="0">
  <hx-accordion-panel open>
    <header slot="header">Cupcake Ipsum</header>
    <div class="hxBox hxMd">
      <!-- body content goes here -->
    </div>
  </hx-accordion-panel>
  <hx-accordion-panel>...</hx-accordion-panel>
  <hx-accordion-panel>...</hx-accordion-panel>
</hx-accordion>

See Also