Bootstrap Tabs Panel Pass dynamic content
Bootstrap Tabs Panel Pass dynamic content:Bootstrap Tabs Panel allows developers to create interactive tabed content where different panels can be displayed based on user interaction. To pass dynamic content, developers can use JavaScript to fetch data from a server or generate content based on user input. Upon tab selection, the appropriate content can be dynamically loaded into the panel, ensuring a seamless user experience. This approach enhances interactivity and flexibility, enabling the creation of dynamic web applications with up-to-date information and personalized user interactions.
Thanks for your feedback!
Your contributions will help us to improve service.
How can I use Bootstrap Tabs to create a panel that dynamically loads and displays content when a tab is selected?
This code snippet demonstrates the usage of Bootstrap tabs with dynamically added content. It creates a tab-based navigation using Bootstrap and jQuery. The script adds additional content to the "Profile" and "Contact" tabs. When a tab is clicked, its corresponding content is displayed. The dynamic content is added programmatically by iterating through the additionalContent object, which contains the title and content for the respective tabs. The new content is then appended to the corresponding tab panes.
Bootstrap Tabs Panel Pass Dynamic Content Example
<body>
<div class="container">
<h3>Bootstrap Tabs Panel Pass dynamic content</h3>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="home-tab"
data-bs-toggle="tab"
href="#home"
role="tab"
aria-controls="home"
aria-selected="true"
>Home</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="profile-tab"
data-bs-toggle="tab"
href="#profile"
role="tab"
aria-controls="profile"
aria-selected="false"
>Profile</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="contact-tab"
data-bs-toggle="tab"
href="#contact"
role="tab"
aria-controls="contact"
aria-selected="false"
>Contact</a
>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div
class="tab-pane fade show active"
id="home"
role="tabpanel"
aria-labelledby="home-tab"
>
<!-- Content for the Home tab -->
<h2>Home Tab</h2>
<p>This is the content of the Home tab.</p>
</div>
<div
class="tab-pane fade"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
<!-- Content for the Profile tab -->
<h2>Profile Tab</h2>
<p>This is the content of the Profile tab.</p>
</div>
<div
class="tab-pane fade"
id="contact"
role="tabpanel"
aria-labelledby="contact-tab"
>
<!-- Content for the Contact tab -->
<h2>Contact Tab</h2>
<p>This is the content of the Contact tab.</p>
</div>
</div>
</div>
<!-- Bootstrap and jQuery JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Activate the tabs
$(document).ready(function () {
$("#myTab a").on("click", function (e) {
e.preventDefault();
$(this).tab("show");
});
// Dynamically add content to tabs
var additionalContent = {
profile: {
title: "Additional Profile Content",
content: "This is additional content for the Profile tab.",
},
contact: {
title: "Additional Contact Content",
content: "This is additional content for the Contact tab.",
},
};
for (var tab in additionalContent) {
var tabContent = additionalContent[tab];
var tabPane = $("#" + tab);
var newContent = `
<div class="additional-content">
<h2>${tabContent.title}</h2>
<p>${tabContent.content}</p>
</div>
`;
tabPane.append(newContent);
}
});
</script>
</body>