Accordion Group

The h-accordion-group webcomponent represents a single group within an accordion. It encapsulates a toggler and its associated content, allowing users to expand or collapse sections of related content within the accordion.

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
• Works seamlessly within the h-accordion container, respecting its mode (single or multiple)

Attributes

Attribute name	Type	Default	Description
opened	boolean	false	Determines if the accordion group is expanded and its content is visible

Example

In this example we render a basic accordion group.

HTML

<h-accordion>
    <h-accordion-group>
        <h-accordion-toggler>
            Toggler 1 
        </h-accordion-toggler>

        <h-accordion-content hidden>
            <p>Content 1.1</p>
            <p>Content 1.2</p>
            <p>Content 1.3</p>
            <p>Content 1.4</p>
        </h-accordion-content>
    </h-accordion-group>
</h-accordion>

Example

In this example we render an accordion group opened by default.

HTML

<h-accordion>
    <h-accordion-group opened>
        <h-accordion-toggler>
            Toggler 1 
        </h-accordion-toggler>

        <h-accordion-content hidden>
            <p>This content is visible by default</p>
        </h-accordion-content>
    </h-accordion-group>
</h-accordion>

Example

In this example we render a disabled accordion group.

HTML

<h-accordion disabled>
    <h-accordion-group>
        <h-accordion-toggler>
            <button>Now this is not clickable</button>
        </h-accordion-toggler>

        <h-accordion-content hidden>
            <div>
                This content is always visible while accordion is disabled
            </div>
        </h-accordion-content>
    </h-accordion-group>
</h-accordion>

Accordion Group API

The h-accordion-group webcomponent provides several public methods to control its state programmatically.

show(): void

Expands the accordion group, making its content visible.

const accordionGroup = document.querySelector('h-accordion-group');
accordionGroup.show();

hide(): void

Collapses the accordion group, hiding its content.

const accordionGroup = document.querySelector('h-accordion-group');
accordionGroup.hide();

toggle(): void

Toggles the visibility of the accordion group's content.

const accordionGroup = document.querySelector('h-accordion-group');
accordionGroup.toggle();

enable(): void

Enables the accordion group, allowing it to be toggled.

const accordionGroup = document.querySelector('h-accordion-group');
accordionGroup.enable();

disable(): void

Disables the accordion group, preventing it from being toggled and keeping it visible.

const accordionGroup = document.querySelector('h-accordion-group');
accordionGroup.disable();

DOM Events

The h-accordion-group listens to the following DOM Events:

• toggle

Webcomponents reference

• h-accordion
• h-accordion-toggler
• h-accordion-content