# Accordions Sections that open one at a time, or each on its own, on the browser's own disclosure - `
` and ``: no script, the keys and the open state built in, and the browser's find in page opens a closed section on a match. ## Examples Items that share a `name` are one group: opening one closes the one that was open. `open` opens an item from the start. ```html
What does a day trip include?
The transfer from the hotel, the boat, lunch, snorkelling gear and the park fee.
Can I cancel a booking?
Free of charge up to 24 hours before the start; later, half the price is kept.
Are children welcome?
From four years old; under four they travel free.
``` ### Each on its own Without `name` every item opens and closes by itself. ```html
Pickup
07:30 at the pier, 07:00 from the hotels of the old town.
What to bring
Swimwear, a towel and a sunscreen that spares the reef.
``` ### Flush `accordion-flush` drops the frame and the side padding, for sections inside a card or a drawer. ```html
Prices
Adults 2,500 · children 1,900 · under four free.
History
Edited yesterday by M. K.; published on three sites.
``` ## States ## Keyboard and accessibility | Key | On a section's header | | --- | --- | | `Enter`, `Space` | Opens or closes the section; in a group, opening it closes the open one | | `Tab` | The next header, or the first control inside an open section | - The header is the `` itself, which the browser announces as expanded or collapsed. Put no heading inside it: screen readers announce a heading in a summary unevenly. When the sections need a place in the page's outline, a heading goes before the accordion. - The chevron is decoration, `aria-hidden="true"`; it turns as the section opens. - A section opens with a short animation only where the browser has `interpolate-size`, and only when the reader allows motion; elsewhere it opens at once. - From script: `details.open = true`, and the `toggle` event after each change. ## Tokens From [`css/components/accordion.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/accordion.css), which declares no custom property of its own. It reads the theme's `--redz-border`, `--redz-bg`, `--redz-radius-12`, `--redz-space-12`, `--redz-space-16`, `--redz-text`, `--redz-bg-hover`, `--redz-text-muted`, `--redz-radius-8`, `--redz-motion`, `--redz-ease`. ## From Bootstrap 5.3 | Bootstrap 5.3 | REDZ.UI | Change | Note | | --- | --- | --- | --- | | `accordion-button` | - | remove | the summary is the button; its chevron is | | `accordion-collapse` | - | remove | the body follows the summary inside the
| | `accordion-header` | `accordion-header` | review | the item's with the button's words in it; no heading and no button inside | | `accordion-item` | `accordion-item` | review | a
; the items of one group share a name, as data-bs-parent did | | `data-bs-parent` | `name` | trigger | the same name on every
of the group |