Accordion

Displays an accordion

Import

@import '@webtui/css/components/accordion.css';

Usage

<details is-="accordion">
    <summary>Summary title</summary>
    <p>Accordion content</p>
</details>

Examples

Nesting

Reference

Extending

To extend the Badge stylesheet, define a CSS rule on the components layer

@layer components {
    details[is-~='accordion'] {
        &[variant-='directory'] {
            summary::before {
                content: '> ';
            }

            &[open] summary::before {
                content: 'v ';
            }
        }

        /* ... */
    }
}

Scope

• All <details> elements with the is-~="accordion" selector

details[is-~='accordion'] {
    /* ... */
}