Color schemes

More color schemes will be available soon!

Layout options
Boxed layout backgrounds

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

Documentation

To see all the available options & configurations, we suggest reading the jQueryUI Accordion documentation.

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
Get source

                

Header 1

Accordion content 1

Header 2

Accordion content 2

Header 3

Accordion content 3

To view more accordion widget examples, you can visit the jQueryUI Accordion demos page.

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
Get source

                

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
Get source

                

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
Get source

                

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