Skip to content

Accordion

The h-accordion webcomponent serves as the container for accordion groups, managing their behavior and state. It provides a structured way to display expandable and collapsible content sections, enhancing the user experience by organizing information in a clean and accessible manner.

Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.

Features:

  • Supports both single and multiple open groups
  • Controls the open/closed state of accordion groups
  • Implements ARIA roles and states for better accessibility
  • Manages toggle events to ensure proper behavior of accordion groups

Inner h-accordion components

h-accordion contains a few inner webcomponents that ensure clean and smooth behavior of a whole structure.

  • h-accordion-group - wraps a toggler and a content. You may have several groups in one accordion
  • h-accordion-toggler - responsible for toggling the visibility of the accordion. It can contain any HTML markup
  • h-accordion-content - responsible for encapsulating the content of the accordion. It can contain any HTML markup

Attributes

Attribute name Type Default Description
disabled boolean false Determines if the accordion is interactive. When disabled, all groups are expanded and non-collapsible
mode string multi Defines the accordion behavior mode. Can be set to single (only one group open at a time) or multi (multiple groups can be open)

Example

In this example, the h-accordion contains a single h-accordion-group with a h-accordion-toggler and its associated h-accordion-content. Clicking the toggler will expand or collapse the content.

HTML
<h-accordion>
    <h-accordion-group>
        <h-accordion-toggler>
            <button>Section 1</button>
        </h-accordion-toggler>

        <h-accordion-content id="content-1" hidden>
            <p>This is the content of section 1.</p>
        </h-accordion-content>
    </h-accordion-group>
</h-accordion>

Example

In single mode, only one accordion group can be open at a time. Opening a new group will automatically close the previously opened group.

HTML
<h-accordion mode="single">
    <h-accordion-group>
        <h-accordion-toggler>
            <button>Section 1</button>
        </h-accordion-toggler>

        <h-accordion-content id="content-1" hidden>
            <p>Content for section 1.</p>
        </h-accordion-content>
    </h-accordion-group>

    <h-accordion-group>
        <h-accordion-toggler>
            <button>Section 2</button>
        </h-accordion-toggler>

        <h-accordion-content id="content-2" hidden>
            <p>Content for section 2.</p>
        </h-accordion-content>
    </h-accordion-group>
</h-accordion>

Example

In multi mode, multiple accordion groups can be open simultaneously, allowing users to expand or collapse sections independently.

HTML
<h-accordion>
    <h-accordion-group>
        <h-accordion-toggler>
            <button>Section 1</button>
        </h-accordion-toggler>

        <h-accordion-content id="content-1" hidden>
            <p>Content for section 1.</p>
        </h-accordion-content>
    </h-accordion-group>

    <h-accordion-group>
        <h-accordion-toggler>
            <button>Section 2</button>
        </h-accordion-toggler>

        <h-accordion-content id="content-2" hidden>
            <p>Content for section 2.</p>
        </h-accordion-content>
    </h-accordion-group>
</h-accordion>

Example

When the h-accordion is disabled, all accordion groups are expanded and cannot be toggled. This is useful for scenarios where you want to display all content without allowing user interaction.

HTML
<h-accordion disabled>
    <h-accordion-group>
        <h-accordion-toggler>
            <button>Disabled Section 1</button>
        </h-accordion-toggler>

        <h-accordion-content id="disabled-content-1">
            <p>This content is always visible while the accordion is disabled.</p>
        </h-accordion-content>
    </h-accordion-group>

    <h-accordion-group>
        <h-accordion-toggler>
            <button>Disabled Section 2</button>
        </h-accordion-toggler>

        <h-accordion-content id="disabled-content-2">
            <p>This content is also always visible while the accordion is disabled.</p>
        </h-accordion-content>
    </h-accordion-group>
</h-accordion>

Accordion API

The h-accordion webcomponent provides public methods to control its state programmatically. These methods allow enabling or disabling the entire accordion, affecting all nested groups.

enable(): void

Enables the accordion, making all groups interactive and allowing users to toggle them.

const accordion = document.querySelector('h-accordion#my-accordion');
accordion.enable();

disable(): void

Disables the accordion, expanding all groups and preventing any toggling actions.

const accordion = document.querySelector('h-accordion#my-accordion');
accordion.disable();

Webcomponents reference