Accordion

An accordion is a UI element that allows users to toggle the display of content within it. It is often used to display a large amount of information in a small space.

​
Default

Simple example of a accordion.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo

HTML
JSX
<div class="accordion-group">
	<div class="accordion">
		<input type="checkbox" id="accordion-1" class="accordion-toggle" />
		<label for="accordion-1" class="accordion-title">Toggle Accordion 1</label>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
	<div class="accordion">
		<input type="checkbox" id="accordion-2" class="accordion-toggle" />
		<label for="accordion-2" class="accordion-title">Toggle Accordion 2</label>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo</div>
		</div>
	</div>
</div>

​
Focusable

Accordion on click will collapse the other

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod iure quod iure quibusdam corrupti eos quos quod iure quibusdam

HTML
JSX
<div class="accordion-group accordion-group-bordered">
	<div class="accordion" tabindex="0">
		<label class="accordion-title">Toggle Accordion 1</label>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
	<div class="accordion" tabindex="0">
		<label class="accordion-title">Toggle Accordion 2</label>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod iure quod iure quibusdam corrupti eos quos quod iure quibusdam</div>
		</div>
	</div>
</div>

​
Hover

Accordion with hover effect

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

HTML
JSX
<div class="accordion-group accordion-group-hover">
	<div class="accordion">
		<input type="checkbox" id="toggle-5" class="accordion-toggle" />
		<label for="toggle-5" class="accordion-title">Toggle Accordion 1</label>
		<div class="accordion-content text-content2">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
	<div class="accordion">
		<input type="checkbox" id="toggle-6" class="accordion-toggle" />
		<label for="toggle-6" class="accordion-title">Toggle Accordion 2</label>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
</div>

​
Bordered

Accordion with border

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod iure quod iure quibusdam corrupti eos quos quod iure quibusdam

HTML
JSX
<div class="accordion-group accordion-group-bordered">
	<div class="accordion">
		<input type="checkbox" id="toggle-7" class="accordion-toggle" />
		<label for="toggle-7" class="accordion-title">Toggle Accordion 1</label>
		<div class="accordion-content text-content2">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
	<div class="accordion">
		<input type="checkbox" id="toggle-8" class="accordion-toggle" />
		<label for="toggle-8" class="accordion-title">Toggle Accordion 2</label>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod iure quod iure quibusdam corrupti eos quos quod iure quibusdam</div>
		</div>
	</div>
</div>

​
Hover and bordered

Accordion with border and hover effect and description

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

HTML
JSX
<div class="accordion-group accordion-group-hover accordion-group-bordered">
	<div class="accordion">
		<input type="checkbox" id="toggle-9" class="accordion-toggle" />
		<label for="toggle-9" class="accordion-title">
			<span>Toggle Accordion 1</span>
			<span class="text-sm text-content3 font-normal">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus</span>
		</label>
		<div class="accordion-content text-content2">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
	<div class="accordion">
		<input type="checkbox" id="toggle-10" class="accordion-toggle" />
		<label for="toggle-10" class="accordion-title">
			<span>Toggle Accordion 2</span>
			<span class="text-sm text-content3 font-normal">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus</span>
		</label>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
</div>

​
Forced opened

You can force to accordion be opened.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

HTML
JSX
<div class="accordion-group accordion-group-hover accordion-group-bordered">
	<div class="accordion accordion-open">
		<label class="accordion-title">Forced Opened</label>
		<div class="accordion-content text-content2">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
	<div class="accordion">
		<input type="checkbox" id="toggle-12" class="accordion-toggle" />
		<label for="toggle-12" class="accordion-title">Toggle Accordion</label>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
</div>

​
Secondary

Will apply a secondary color to the title section.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

HTML
JSX
<div class="accordion-group accordion-group-secondary accordion-group-bordered">
	<div class="accordion">
		<input type="checkbox" id="toggle-13" class="accordion-toggle" />
		<label for="toggle-13" class="accordion-title">Toggle Accordion 1</label>
		<div class="accordion-content text-content2">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
	<div class="accordion">
		<input type="checkbox" id="toggle-14" class="accordion-toggle" />
		<label for="toggle-14" class="accordion-title">Toggle Accordion 2</label>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
</div>

​
With icon

With a icon on the right side of the title.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

HTML
JSX
<div class="accordion-group accordion-group-bordered">
	<div class="accordion">
		<input type="checkbox" id="toggle-15" class="accordion-toggle" />
		<label for="toggle-15" class="accordion-title">Toggle Accordion 1</label>
		<span class="accordion-icon">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path></svg>
		</span>
		<div class="accordion-content text-content2">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
	<div class="accordion">
		<input type="checkbox" id="toggle-16" class="accordion-toggle" />
		<label for="toggle-16" class="accordion-title">Toggle Accordion 2</label>
		<span class="accordion-icon">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path></svg>
		</span>
		<div class="accordion-content">
			<div class="min-h-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod</div>
		</div>
	</div>
</div>

​
API

classNameDescription
accordion-groupWrapper htmlFor accordion group
accordion-group-secondarySet secondary color to the title section
accordion-group-borderedAll the accordion will have a border
accordion-group-hoverTitle section will have a hover effect
accordion-toggleToggle htmlFor accordion
accordionWrapper htmlFor the title and content
accordion-titleTitle section of the accordion
accordion-iconIcon htmlFor the accordion on the right side
accordion-contentContent section of the accordion
accordion-openThe accordion will be opened by default
Alert
Edit this page on GitHub