Akkordeon 🗂️

Basic demo (see the console for onToggle callback)

What is an accordion?

Colloquially known as a squeezebox, it's a box-shaped musical instrument

Where does the name come from?

It comes from the German Akkordeon, which is derived from Akkord -- "musical chord, concord of sounds"

When should you use one for web development?

Whenever you need progressive disclosure. In other words, when you need to highlight some important information (title) and only show details if the user is interested (content).

Toggle item

What is an accordion?

Colloquially known as a squeezebox, it's a box-shaped musical instrument

Where does the name come from?

It comes from the German Akkordeon, which is derived from Akkord -- "musical chord, concord of sounds"

When should you use one for web development?

Whenever you need progressive disclosure. In other words, when you need to highlight some important information (title) and only show details if the user is interested (content).

Open first element by default

What is an accordion?

Colloquially known as a squeezebox, it's a box-shaped musical instrument

Where does the name come from?

It comes from the German Akkordeon, which is derived from Akkord -- "musical chord, concord of sounds"

When should you use one for web development?

Whenever you need progressive disclosure. In other words, when you need to highlight some important information (title) and only show details if the user is interested (content).

Open multiple

What is an accordion?

Colloquially known as a squeezebox, it's a box-shaped musical instrument

Where does the name come from?

It comes from the German Akkordeon, which is derived from Akkord -- "musical chord, concord of sounds"

When should you use one for web development?

Whenever you need progressive disclosure. In other words, when you need to highlight some important information (title) and only show details if the user is interested (content).

Load async

What is an accordion?

Colloquially known as a squeezebox, it's a box-shaped musical instrument

Where does the name come from?

It comes from the German Akkordeon, which is derived from Akkord -- "musical chord, concord of sounds"

When should you use one for web development?

Whenever you need progressive disclosure. In other words, when you need to highlight some important information (title) and only show details if the user is interested (content).