43 lines
1.8 KiB
Markdown
43 lines
1.8 KiB
Markdown
---
|
|
title: Accordion
|
|
description: Component for grouping <details> HTML elements where only one of them can be open at the same time.
|
|
---
|
|
|
|
<Header title="Accordion" section="UI components">
|
|
Component for grouping <code>details</code> HTML elements where only one of them can be open at the same time.
|
|
</Header>
|
|
|
|
An accordion is a vertically stacked group of collapsible sections. HTML has already a native element for this, the `<details>` element, but it doesn't support the "only one open at a time" behavior, so we need to add some JS to make it work, and that's what this component does.
|
|
|
|
If you don't need to ensure only one section is open at a time, you don't need this component at all, just use the `<details>` element directly.
|
|
|
|
<ExampleTabs
|
|
prefix="demo"
|
|
:panels="{
|
|
'Result': 'ui.Accordion.DemoResult',
|
|
'HTML': 'ui.Accordion.DemoHTML',
|
|
'CSS': 'ui.Accordion.DemoCSS',
|
|
}"
|
|
/>
|
|
|
|
|
|
The `Accordion` is a simple wrapper plus some JS logic, so it doesn't uses any arguments and it's as accesible as the `details` element you put inside.
|
|
|
|
|
|
## Events
|
|
|
|
The `Accordion` doesn't emit or listen to any events, but the `<details>` elements inside do.
|
|
|
|
In addition to the usual events supported by HTML elements, the `<details>` element supports the `toggle` event, which is dispatched to the `<details>` element whenever its state changes between open and closed. The `Accordion` component listen to it to be able to close the other `<details>` elements when one is opened.
|
|
|
|
The `toggle` event is sent *after* the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.
|
|
|
|
```js
|
|
details.addEventListener("toggle", (event) => {
|
|
if (details.open) {
|
|
/* the element was toggled open */
|
|
} else {
|
|
/* the element was toggled closed */
|
|
}
|
|
});
|
|
```
|