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.

Toggle Accordion 1

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

Toggle Accordion 2

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

Toggle Accordion 1

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

Toggle Accordion 2

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

Toggle Accordion 1

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

Toggle Accordion 2

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

Toggle Accordion 1

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

Toggle Accordion 2

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

Toggle Accordion 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus

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

Toggle Accordion 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus

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.

Forced 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

Toggle 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

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.

Toggle Accordion 1

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

Toggle Accordion 2

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.

Toggle Accordion 1

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

Toggle Accordion 2

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#

`Accordion Classes`

className	Description
accordion-group	Wrapper htmlFor accordion group
accordion-group-secondary	Set secondary color to the title section
accordion-group-bordered	All the accordion will have a border
accordion-group-hover	Title section will have a hover effect
accordion-toggle	Toggle htmlFor accordion
accordion	Wrapper htmlFor the title and content
accordion-title	Title section of the accordion
accordion-icon	Icon htmlFor the accordion on the right side
accordion-content	Content section of the accordion
accordion-open	The accordion will be opened by default

Get Started - Customization Alert

Edit this page on GitHub