Accordion Displays collapsible content panels for presenting information in a limited amount of space.

Basic example

To create a basic accordion area you have to use the following HTML structure and initialize the jQueryUI Accordion widget using a selector.

Header 1

Accordion content 1

Header 2

Accordion content 2

Header 3

Accordion content 3

Icons

The accordion headers can have other icons, beside the up/down arrows. You can change icons colors by using the core helper classes.

Left icon I

Accordion content 1

Left icon II

Accordion content 2

Right icon

Accordion content 3

Both icons

Accordion content 4

Open on mouseover

The jQueryUI Accordion widget also support the option to open tabbed content on mouse over, rather than click.

Header 1

Accordion content 1

Header 2

Accordion content 2

Header 3

Accordion content 3

Accordion with tabs

To use the tabs widget inside an accordion panel you have to add class pad0A to the panel div to remove padding. We'll take care of the rest.

Section 1

Accordion panel content 1

Section 2

Tab content 1
Tab content 2
Tab content 3
Tab content 4
Tab content 5

Section 3

Tab content 1
Tab content 2
Tab content 3
Tab content 4
Tab content 5