DEV Community

Discussion on: Native HTML: Accordion

Collapse
jfbrennan profile image
Jordan Brennan • Edited on

Wrap it in a custom HTML tag:

<m-accordion>
    <details>
        <summary>Summary</summary>
        <p>Details about this thing</p>
    </details>
    <details>
        <summary>Summary</summary>
        <p>Details about this thing</p>
    </details>
</m-accordion>
Enter fullscreen mode Exit fullscreen mode

That gives you the option to style <details> in accordion differently (e.g. M- clears all details styles, but adds some when inside accordion) and this also gives you the parent element needed to control the one at a time open state.