Creating a Dynamic Tabs Component with jQuery UI
Introduction
A dynamic tabs component is a UI feature that allows users to navigate between multiple content sections within a single page by clicking on tabs. Instead of loading a new page, different content is displayed dynamically when a tab is clicked.
Using jQuery UI Tabs, we can create a fully functional and interactive tab system that allows users to add, remove, and manage tabs dynamically.
Why Use jQuery UI Tabs?
✅ User-Friendly Navigation – Keeps related content within a single page.
✅ Dynamically Add or Remove Tabs – Supports adding new tabs without refreshing.
✅ Lightweight & Efficient – Uses minimal JavaScript and improves UX.
✅ AJAX Support – Fetch data dynamically without reloading the page.
✅ Cross-Browser Compatibility – Works seamlessly across all major browsers.
1. Setting Up jQuery UI
To use jQuery UI Tabs, we need to include:
- jQuery Library
- jQuery UI Library
- jQuery UI CSS
Including jQuery UI via CDN
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI Library -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
Alternatively, you can download jQuery UI from jqueryui.com/download and host it locally.
2. Creating a Basic Static Tabs Component
Before making it dynamic, let’s first create a basic static tab system using jQuery UI.
HTML Structure for Static Tabs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Tabs Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
</ul>
<div id="tab-1">
<p>Content for Tab 1.</p>
</div>
<div id="tab-2">
<p>Content for Tab 2.</p>
</div>
</div>
<script>
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
</body>
</html>
Explanation:
✔ <ul> for Tab Navigation – Links to the corresponding tab content.
✔ <div> for Content Sections – Holds content for each tab.
✔ $("#tabs").tabs(); – Initializes jQuery UI Tabs.
Result: Clicking on a tab shows the corresponding content section.
3. Making Tabs Dynamic
Now, let’s allow users to add new tabs dynamically.
Updated HTML with Buttons
<button id="add-tab">Add Tab</button>
<button id="remove-tab">Remove Last Tab</button>
<div id="tabs">
<ul id="tab-list">
<li><a href="#tab-1">Tab 1</a></li>
</ul>
<div id="tab-1">
<p>Content for Tab 1.</p>
</div>
</div>
JavaScript to Add and Remove Tabs
$(document).ready(function() {
$("#tabs").tabs();
let tabCounter = 2; // Counter for new tabs
// Function to add a new tab
$("#add-tab").click(function() {
let tabId = "tab-" + tabCounter;
$("#tab-list").append(`<li><a href="#${tabId}">Tab ${tabCounter}</a></li>`);
$("#tabs").append(`<div id="${tabId}"><p>Content for Tab ${tabCounter}.</p></div>`);
$("#tabs").tabs("refresh"); // Refresh tabs
tabCounter++;
});
// Function to remove the last tab
$("#remove-tab").click(function() {
let lastTab = $("#tab-list li:last-child");
let lastTabId = lastTab.find("a").attr("href");
lastTab.remove(); // Remove tab button
$(lastTabId).remove(); // Remove tab content
$("#tabs").tabs("refresh"); // Refresh tabs
});
});
How It Works:
✔ Adds New Tabs – Creates a new tab dynamically.
✔ Removes Last Tab – Deletes the last tab from the list.
✔ Refreshes jQuery UI Tabs – Ensures proper functionality after adding/removing.
Result: Clicking “Add Tab” adds a new tab, and clicking “Remove Last Tab” removes the last tab.
4. Adding Close Buttons to Tabs
We can make each tab removable with a close button.
Updated JavaScript with Close Buttons
$(document).ready(function() {
$("#tabs").tabs();
let tabCounter = 2;
$("#add-tab").click(function() {
let tabId = "tab-" + tabCounter;
$("#tab-list").append(`<li><a href="#${tabId}">Tab ${tabCounter}</a> <span class="close-tab">✖</span></li>`);
$("#tabs").append(`<div id="${tabId}"><p>Content for Tab ${tabCounter}.</p></div>`);
$("#tabs").tabs("refresh");
tabCounter++;
});
// Close tab on clicking the close button
$(document).on("click", ".close-tab", function() {
let tabItem = $(this).parent();
let tabId = tabItem.find("a").attr("href");
tabItem.remove();
$(tabId).remove();
$("#tabs").tabs("refresh");
});
});
How It Works:
✔ Each tab has a close button (✖).
✔ Clicking ✖ removes the tab dynamically.
✔ Uses $(document).on() to handle dynamically added elements.
5. Loading Tab Content with AJAX
Instead of static content, we can load content dynamically from a server.
Modify Tabs to Use AJAX
<div id="tabs">
<ul>
<li><a href="content1.html">Tab 1</a></li>
<li><a href="content2.html">Tab 2</a></li>
</ul>
</div>
JavaScript for AJAX Loading
$(document).ready(function() {
$("#tabs").tabs({
beforeLoad: function(event, ui) {
ui.jqXHR.fail(function() {
ui.panel.html("Error loading content.");
});
}
});
});
How It Works:
✔ Each tab loads external HTML content (content1.html, content2.html).
✔ If content fails to load, an error message is displayed.
We successfully created a fully functional dynamic tab system using jQuery UI. This included: ✅ Basic tab navigation
✅ Dynamically adding and removing tabs
✅ Adding close buttons to tabs
✅ Loading tab content via AJAX
Would you like to enhance it further with animations, themes, or database storage?