jQuery UI Tabs

jQuery UI Tabs is a user interface component that allows you to organize content into multiple tabs, presenting them in a visually appealing and space-efficient manner. Users can switch between tabs to view different sets of content without navigating to separate pages.

Installation

To use jQuery UI Tabs, you need to include the jQuery library and the jQuery UI library in your HTML file.

<!-- Include jQuery library --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Include jQuery UI library --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Basic Usage

To create tabs, you need to structure your HTML with a container element for the tabs and content divs for each tab's content.

<div id="tabs"> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1"> <!-- Content for Tab 1 --> </div> <div id="tab2"> <!-- Content for Tab 2 --> </div> <div id="tab3"> <!-- Content for Tab 3 --> </div> </div> // Initialize the tabs $("#tabs").tabs();

Customization

You can customize the appearance and behavior of tabs using various options and event handlers.

$("#tabs").tabs({ active: 1, // Set the initially active tab collapsible: true, // Allow closing active tab event: "mouseover" // Change tab on mouseover event });

AJAX Tabs

You can load tab content dynamically from external sources using AJAX.

$("#tabs").tabs({ beforeLoad: function(event, ui) { ui.jqXHR.fail(function() { ui.panel.html("Failed to load content."); }); } });

Events

Tabs offer event handlers for actions like tab activation and deactivation.

$("#tabs").tabs({ activate: function(event, ui) { console.log("Tab activated:", ui.newTab.text()); } });

Nested Tabs

You can create nested tabs to organize content even further.

<div id="parentTabs"> <ul> <li><a href="#childTabs1">Parent Tab 1</a></li> <li><a href="#childTabs2">Parent Tab 2</a></li> </ul> <div id="childTabs1"> <div id="nestedTabs"> <ul> <li><a href="#nestedTab1">Nested Tab 1</a></li> <li><a href="#nestedTab2">Nested Tab 2</a></li> </ul> <div id="nestedTab1"> <!-- Content for Nested Tab 1 --> </div> <div id="nestedTab2"> <!-- Content for Nested Tab 2 --> </div> </div> </div> <div id="childTabs2"> <!-- Content for Parent Tab 2 --> </div> </div> $("#parentTabs").tabs(); $("#nestedTabs").tabs();
run this source code Browser View

jQuery UI Tabs Example

This is the content of Tab 1.

This is the content of Tab 2.

This is the content of Tab 3.

Full Source | jQuery

<!DOCTYPE html> <html> <head> <title>jQuery UI Tabs Example</title> <!-- Include jQuery library --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Include jQuery UI library --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { // Initialize the tabs $("#tabs").tabs({ collapsible: true, // Allow closing active tab event: "mouseover" // Change tab on mouseover event }); }); </script> </head> <body> <h1>jQuery UI Tabs Example</h1> <!-- Tabs container --> <div id="tabs"> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1"> <p>This is the content of Tab 1.</p> </div> <div id="tab2"> <p>This is the content of Tab 2.</p> </div> <div id="tab3"> <p>This is the content of Tab 3.</p> </div> </div> </body> </html>

Conclusion

jQuery UI Tabs provide an efficient way to organize and present content, offering a smooth user experience by allowing users to switch between different sections of information without requiring separate page loads. The flexibility to customize appearance, handle events, and even nest tabs makes them a versatile choice for enhancing your web application's layout and usability.