Accordions

Sections that open one at a time, or each on its own, on the browser's own disclosure - <details> and <summary>: 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.

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.

<div class="accordion">
	<details class="accordion-item" name="accordion-basic" open>
		<summary class="accordion-header">What does a day trip include?<i class="bi bi-chevron-down accordion-icon" aria-hidden="true"></i></summary>
		<div class="accordion-body">The transfer from the hotel, the boat, lunch, snorkelling gear and the park fee.</div>
	</details>
	<details class="accordion-item" name="accordion-basic">
		<summary class="accordion-header">Can I cancel a booking?<i class="bi bi-chevron-down accordion-icon" aria-hidden="true"></i></summary>
		<div class="accordion-body">Free of charge up to 24 hours before the start; later, half the price is kept.</div>
	</details>
	<details class="accordion-item" name="accordion-basic">
		<summary class="accordion-header">Are children welcome?<i class="bi bi-chevron-down accordion-icon" aria-hidden="true"></i></summary>
		<div class="accordion-body">From four years old; under four they travel free.</div>
	</details>
</div>

Each on its own

Without name every item opens and closes by itself.

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.

<div class="accordion">
	<details class="accordion-item" open>
		<summary class="accordion-header">Pickup<i class="bi bi-chevron-down accordion-icon" aria-hidden="true"></i></summary>
		<div class="accordion-body">07:30 at the pier, 07:00 from the hotels of the old town.</div>
	</details>
	<details class="accordion-item">
		<summary class="accordion-header">What to bring<i class="bi bi-chevron-down accordion-icon" aria-hidden="true"></i></summary>
		<div class="accordion-body">Swimwear, a towel and a sunscreen that spares the reef.</div>
	</details>
</div>

Flush

accordion-flush drops the frame and the side padding, for sections inside a card or a drawer.

Prices

Adults 2,500 · children 1,900 · under four free.

History

Edited yesterday by M. K.; published on three sites.

<div class="card">
	<div class="card-body">
		<div class="accordion accordion-flush">
			<details class="accordion-item" name="accordion-flush" open>
				<summary class="accordion-header">Prices<i class="bi bi-chevron-down accordion-icon" aria-hidden="true"></i></summary>
				<div class="accordion-body">Adults 2,500 · children 1,900 · under four free.</div>
			</details>
			<details class="accordion-item" name="accordion-flush">
				<summary class="accordion-header">History<i class="bi bi-chevron-down accordion-icon" aria-hidden="true"></i></summary>
				<div class="accordion-body">Edited yesterday by M. K.; published on three sites.</div>
			</details>
		</div>
	</div>
</div>

States

class	rest	:hover	:focus-visible	open
accordion-item	Pickup 07:30 at the pier.	Pickup 07:30 at the pier.	Pickup 07:30 at the pier.	Pickup 07:30 at the pier.

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 <summary> 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, 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 <i class="bi bi-chevron-down accordion-icon">
`accordion-collapse`	-	remove	the body follows the summary inside the <details>
`accordion-header`	`accordion-header`	review	the item's <summary> with the button's words in it; no heading and no button inside
`accordion-item`	`accordion-item`	review	a <details>; the items of one group share a name, as data-bs-parent did
`data-bs-parent`	`name`	trigger	the same name on every <details> of the group