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
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
include "include/footer.html"