@19h47/accordion

Build vertically collapsing accordions

Panels are wired through aria-controls and resolved at runtime with ariaControlsElements (Baseline 2025).

Usage

import Accordion from '@19h47/accordion';

const element = document.querySelector('.js-accordion');
const accordion = new Accordion(element);

accordion.init();
<div class="js-accordion">
	<div
		class="js-accordion-panel"
		data-accordion-open="true"
		data-accordion-deselect="true"
	>
		<h3>
			<button
				class="js-accordion-header"
				type="button"
				id="lorem-header"
				aria-expanded="true"
				aria-controls="lorem-body"
			>
				Toggle
			</button>
		</h3>

		<div id="lorem-body" role="region" aria-labelledby="lorem-header">
			<div class="js-accordion-inner">
				Panel content
			</div>
		</div>
	</div>
</div>

Deselectable

Sit amet, consectetur adipisicing elit. Omnis ex inventore tempore. Quam voluptas quibusdam excepturi accusantium voluptatum facere.

Undeselectable

Once open, this panel cannot be collapsed from its header.

With transition

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus quos dolor deleniti?

Hash

Anchor the link on the panel root (always visible), e.g. #behir — not the hidden region body.

Behir

The behir is a snake-like reptilian monster whose dozen legs allow it to move with considerable speed.

Multiselectable

Nested

Add

Sit amet, consectetur adipisicing elit. Omnis ex inventore tempore.