Native Accordion

• Expand/collapse content
• Nested accordions
• Keyboard control
• Accessibility compliance
• Animation (when allowed)
• CSS-only fallback
• Mobile-only accordion
• Pop-in grid
• Accordion group
• Themeable via CSS variables
• RTL support
• BEM classes
• No dependencies
• <2 KB gzipped

<div class="n-accordion">
	<input type="checkbox" aria-label="Toggle accordion">
	<h2 class="n-accordion__label">
		<button id="accordion-1-button" aria-controls="accordion-1-content">
			Title
		</button>
	</h2>
	<div class="n-accordion__content" role="region" id="accordion-1-content" aria-labelledby="accordion-1-button">
		<p>Content</p>
	</div>
</div>

<div class="n-accordion">
	<input type="checkbox" checked aria-label="Toggle accordion">
	<h2 class="n-accordion__label">
		<button id="accordion-1-button" aria-controls="accordion-1-content" aria-expanded="true">
			Label
		</button>
	</h2>
	<div class="n-accordion__content" role="region" id="accordion-1-content" aria-labelledby="accordion-1-button">
		<p>Content</p>
	</div>
</div>

<div role="group">
	<div class="n-accordion">
		...
	</div>
	<div class="n-accordion">
		...
	</div>
	...
</div>

<div class="n-accordion">
	<input type="checkbox" aria-label="Toggle accordion">
	<h2 class="n-accordion__label">
		<button id="accordion-1-button" aria-controls="accordion-1-content">
			Title
		</button>
	</h2>
	<div class="n-accordion__content" id="accordion-1-content" aria-labelledby="accordion-1-button" role="region">
		<div class="n-accordion">
			...
		</div>	
	</div>
</div>

<div class="n-accordion__popin" role="group">
	<div class="n-accordion">
		...
	</div>
	...
</div>

<div class="n-accordion n-accordion--mobile">
	<input type="checkbox" aria-label="Toggle accordion">
	<h2 class="n-accordion__label">
		<button id="accordion-1-button" aria-controls="accordion-1-content">
			Title
		</button>
	</h2>
	<div class="n-accordion__content"  id="accordion-1-content" aria-labelledby="accordion-1-button" role="region">
		<p>Content</p>
	</div>
</div>

How to use

Get the n-accordion NPM module and either add n-accordion.js and n-accordion.scss to your project
or use n-accordion.min.js and n-accordion.min.css on your page.

Options

• Use the --duration CSS variable or the data-duration attribute on .n-accordion for custom animation timing, in seconds
• Specify theme by CSS variables
  --nui-control-bg,
  --nui-control-color,
  --nui-control-active-bg,
  --nui-control-active-color,
  --nui-border-size,
  --nui-border-color,
  --nui-shadow-blur,
  --nui-shadow-size,
  --nui-shadow-color,
  --nui-border-radius
• Pop-in number of columns specified by --n-popin-columns
• The .n-accordion__label element can be either h1/h2/h3/h4/h5/h6 or any tag with role="heading" and aria-level
• Customize the label vertical margin by --accordion-margin
• Animation is instant when the system Reduce motion option is enabled
• Customize the chevron by overriding .n-accordion__label button:after { --icon: url(...) } with a URL-encoded SVG. It will be coloured by --nui-control-color
• .n-accordion__content with nested accordions can have role="group" to keep only one child accordion open at a time
• .n-accordion.n-accordion--close-nested will close all child accordions when closed

Links

GitHub page

Developed by Radoslav Sharapanov, originally a part of the niui library.

Buy me a beer