Accessibility

Try to tab to an accordion section header and press the [space] key to toggle the content.

With JavaScript disabled, content is still accessible and visible.

Theming

One theme with 4 different color options is included. Accordion A is also completely custom styleable with CSS.

jQuery plugin

For functionality, jQuery comes into play.

Minimal lines of code and performance optimizations like event delegation make a robust and lightweight accordion.

Expand a section on page load

<section aria-expanded="true">

Hash link to any section or its content

E.g. go to the final section.

<a href="#the-final-section">the final section</a>

<section id="the-final-section">

Fixed height

.accordion-a section .content {
height:200px;
overflow:auto;
}

An accordion is a great piece of UI.
You can use it when

1. you want to give the user an overview on all sections and the ability to dive deeper into one section
2. you have between 3 and 15 sections

It is a perfect fit for

• FAQs
• a services overview
• managing settings
• pages where less scrolling is preferred
• any kind of overview with sections related to each other

Glad to see no lorem ipsum here?
Let's keep the lorem away and without any ipsum delay give this message a stay:

Thank you for your interest in Accordion A

You read it. You're being thanked because you took the time to check this out.

It's the final section of this accordion. The icing on the cake.

Excitement builds up ... will you $ it?
And if you $ it and you ♥ it will you ★ it?

Happy { } -ing!