- 1.5.0

Accordion

Renders a set of headings that control the visibility of their content sections.

Read more Read less

Maturity: Developing

The markup may change. Replacing the div, button and aria-expanded with the platform's own <details> and <summary> is under consideration. It would need no JavaScript, and it would change the elements this component emits and the attributes your stylesheet targets.

Usage

<.accordion id="dog-breeds">
  <:section title="Golden Retriever">
    <p>
      Friendly, intelligent, great with families. Origin: Scotland. Needs
      regular exercise.
    </p>
  </:section>
  <:section title="Siberian Husky">
    <p>
      Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
      Loves cold climates.
    </p>
  </:section>
  <:section title="Dachshund">
    <p>
      Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
    </p>
  </:section>
</.accordion>

This component needs the Doggo.Accordion JavaScript hook for the arrow keys. See Phoenix LiveView Hooks for registering it.

Keyboard

  • Enter or Space - toggle the section of the focused header.
  • Up and Down - move to the previous or the next header, wrapping at the ends.
  • Home and End - first and last header.

Every header is in the tab order, which is what the ARIA Authoring Practices describe for an accordion. The arrow keys, Home and End need the colocated hook; the ARIA Authoring Practices list them as optional for an accordion.

Friendly, intelligent, great with families. Origin: Scotland. Needs regular exercise.

Energetic, outgoing, distinctive appearance. Origin: Northeast Asia. Loves cold climates.

Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
expanded :atom

Defines how the accordion sections are initialized.

 Read more Read less
:all
  • :all - All accordion sections are expanded by default.
  • :none - All accordion sections are hidden by default.
  • :first - Only the first accordion section is expanded by default.
heading :string

The heading level for the section title (trigger).

 Read more Read less
"h3"
Required id * :string
rest :global

Any additional HTML attributes.
Required section * :slot
Show slot attributes Hide slot attributes
Required title * :string 
<:section title="Golden Retriever">
  <p>
    Friendly, intelligent, great with families. Origin: Scotland. Needs
    regular exercise.
  </p>
</:section>
<:section title="Siberian Husky">
  <p>
    Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
    Loves cold climates.
  </p>
</:section>
<:section title="Dachshund">
  <p>
    Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
  </p>
</:section>