Skip to content

Accordion Content

The h-accordion-content webcomponent encapsulates the content within an accordion group. It manages the visibility and transitions of the content, ensuring a smooth user experience when expanding or collapsing sections. This component is designed to work seamlessly with h-accordion and h-accordion-group to create dynamic and accessible accordion interfaces.

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 visibility state.

Attributes

Attribute name Type Default Description
transition-name string accordion-toggle Name of the transition effect to apply when showing or hiding the content
id string - Id for the content, used to associate it with its corresponding toggler
labelledby string - Id of the associated h-accordion-toggler element that controls this content region. This prop is given automatically when the webcomponents loads and should not be provided by hand.
hidden boolean true Determines whether the content is hidden

Example

In this example, the h-accordion-content is associated with the h-accordion-toggler via the id attribute. The content is initially hidden and will be displayed when the toggler is activated.

HTML
<h-accordion>
    <h-accordion-group>
        <h-accordion-toggler>
            <button>Toggle 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 this example we customize the transition effect by specifying a different transition-name. Ensure that the corresponding CSS is defined to handle the transition.

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

        <h-accordion-content id="content-2" transition-name="slide-in" hidden>
            <p>This content uses a custom slide-in transition.</p>
        </h-accordion-content>
    </h-accordion-group>
</h-accordion>
CSS
.slide-in-transition-start {
    opacity: 0;
}

.slide-in-transition-end {
    opacity: 1;
}

Webcomponents reference