Tabs

Tabs are pages with separate content that can be switched through. To create a tab control, define a <div class="tabs"> element that contains the individual tab pages. Each tab page is a <div> element. The tab header text is defined in the title HTML attribute of each tab page element.

Multiple tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat vehicula ante, quis ultrices metus ultricies sit amet. Maecenas ornare nunc a est imperdiet, in pulvinar odio porttitor. Ut et velit ante. Suspendisse ut sem auctor, interdum nulla a, pellentesque augue. Maecenas velit quam, ultrices sed blandit eget, pharetra a ligula. Praesent imperdiet sed turpis vitae vehicula. Morbi pretium, nisi eget laoreet finibus, metus ante dapibus nunc, ac consectetur erat est tincidunt turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae urna tempor, dictum tortor id, accumsan tortor. Ut tortor est, finibus nec porttitor a, consectetur et orci. Proin fringilla lacus lorem, quis pellentesque libero fermentum sit amet. Maecenas vel dolor ultricies, sagittis risus vitae, tincidunt magna. Praesent quis congue felis. Morbi varius sapien risus, sed lobortis velit tincidunt ac.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras non neque nunc. Aliquam maximus nisi eu nunc tincidunt scelerisque. Phasellus eu nunc tempus, hendrerit diam vel, porta mauris. Donec sit amet turpis ut sapien dapibus sodales. Nulla in elit ut enim malesuada elementum non quis dui. Donec luctus tincidunt elit nec convallis. Morbi lorem nunc, sollicitudin ac blandit ut, pharetra sed dolor.

Ut placerat pharetra augue eget ultrices. Sed lobortis metus sapien, quis sollicitudin neque ultrices non. Ut nec metus aliquet, lacinia libero a, malesuada urna. Nullam faucibus nisl id convallis euismod. Phasellus massa massa, rhoncus in iaculis ac, blandit a velit. Suspendisse nec justo et enim lobortis porttitor. Nunc eget dui interdum, tristique neque lobortis, fringilla dui. Vestibulum sodales non metus a vehicula. Pellentesque sit amet ornare mauris.

<div class="tabs"> <div title="Tab 1"> Content of page 1 </div> <div title="Tab 2"> Content of page 2 </div> ... </div>

Preselected page

A tab page can be preselected at load time by adding the active CSS class to the page element.

Content of page 1

Content of page 2

Content of page 3

Same height for all pages

If all tab pages should have the same height of the largest page content, add the same-height CSS class to the tab container element. Click through the pages below to see how the height does not change, compared to above.

Synchronised tabs

When the tab page is changed, an activeTabChange event is raised. The tab page can be determined and switched by code. This is done through a plugin extension function with a syntax similar to other jQuery functions. Both features combined can be used to synchronise the selected page in two tab containers. (This does not need to be the case on page load, as shown here, but any interaction will also update the other control.)

Content of page 1

Content of page 2

Content of page 3

Content of page 1

Content of page 2

Content of page 3

$("#tab1").on("activeTabChange", function () { $("#tab2").tabs.activeTab($("#tab1").tabs.activeTab().index()); });

Adding, renaming and removing tabs

Tabs can be added and removed by code.

Content of page 1

Content of page 2

Content of page 3

// Add let page = $("<div/>") .attr("title", "New tab title") .text("New tab content") .appendTo($("#tabs")); $("#tabs").tabs.addTab(page); // Rename $("#tabs").tabs.title($("#tabs").tabs.activeTab(), "Changed title"); // Remove $("#tabs").tabs.removeTab($("#tabs").tabs.activeTab());

Reordering tabs

The order of the tabs can be changed by code.

$("#tabs").tabs.moveTab($("#tabs").tabs.activeTab(), 0); $("#tabs").tabs.moveTab(0, 2);