Basic example
To create a basic tabbed content area you have to use the following HTML structure and initialize the tabs widget using a selector.
tab 1 content
tab 2 content
tab 3 content
Get source
tab 1 content
tab 2 content
tab 3 content
Icons
Tabs can have left/right icons with or without text in their navigation anchors.
tab 1 content
tab 2 content
tab 3 content
Get source
tab 1 content
tab 2 content
tab 3 content
Multiple colors
You can use the core color helpers to change the icons & texts colors & sizes.
tab 1 content
tab 2 content
tab 3 content
tab 4 content
tab 5 content
Get source
tab 1 content
tab 2 content
tab 3 content
tab 4 content
tab 5 content
Tabs alignment
Tabs navigation anchors can be aligned to the left or right. For example, to align a tab navigation anchor to the right, you must add .float-right to its parent li element.
tab 1 content
tab 2 content
tab 3 content
tab 4 content
Get source
tab 1 content
tab 2 content
tab 3 content
tab 4 content
Justified block level navigation
You can create justified block level tabs navigation by wrapping the ul navigation element inside a div with class .button-block-justified like we did in the example below.
tab 1 content
tab 2 content
tab 3 content
tab 4 content
Get source
tab 1 content
tab 2 content
tab 3 content
tab 4 content
Open on mouseover
The jQueryUI Tabs widget also support the option to open tabbed content on mouse over, rather than click.
tab 1 content
tab 2 content
tab 3 content
tab 4 content
Get source
tab 1 content
tab 2 content
tab 3 content
tab 4 content
Tabs with accordion
The jQueryUI Tabs widget also support the option to open tabbed content on mouse over, rather than click.
tab 1 content
Header 1
Accordion content 1
Header 2
Accordion content 2
Header 3
Accordion content 3
Header 1
Accordion content 1
Header 2
Accordion content 2
Header 3
Accordion content 3
tab 4 content
Get source
tab 1 content
Header 1
Accordion content 1
Header 2
Accordion content 2
Header 3
Accordion content 3
Header 1
Accordion content 1
Header 2
Accordion content 2
Header 3
Accordion content 3
tab 4 content
Alternate tabs styling
The tabs navigation below have an alternate styling applied.
tab 1 content
tab 2 content
tab 3 content
Get source
tab 1 content
tab 2 content
tab 3 content
Content boxes with tabs
The examples below have the tabs navigation included in content box header.
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
Get source
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
tab 1 content
tab 2 content
tab 3 content
include "include/footer.html"