Accordion v0.4.0+ HelixUI v0.4.0 or later required

Basic Accordion

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

Cupcake Ipsum

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.

Biscuit Marshmallow

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.

Caramels Marzipan

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.

Cupcake Ipsum

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.

Biscuit Marshmallow

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.

Caramels Marzipan

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.

See Also