Skip to content

Accordion Toggler

The h-accordion-toggler webcomponent serves as the interactive element within an accordion group that allows users to expand or collapse the associated content. It acts as the trigger for showing or hiding the content managed by its parent h-accordion-group.

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

Features:

  • Keyboard support
  • Adds appropriate ARIA roles
  • Provides default transition styles
  • Communicates with the parent h-accordion-group to reflect and control its state.

Attributes

none

Example

In this example, the h-accordion-toggler wraps a <button> element that users can click to expand or collapse the associated h-accordion-content.

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

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

Example

In this example we render a disabled h-accordion. When the parent accordion is disabled, the toggler becomes non-interactive, and the content remains visible.

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

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

DOM Events

The h-accordion-toggler dispatches the following DOM Events:

Webcomponents reference