<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Customized Bootstrap 5 Modal Example</title>
<!-- Include Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<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>
<style>
/* Customizing the active tab link */
.nav-link.active {
background-color: #007bff;
color: #fff;
}
/* Customizing the tab content background and padding */
.tab-content {
background-color: #f8f9fa;
padding: 20px;
}
/* Customizing the tab content headings */
.tab-pane h2 {
margin-top: 0;
margin-bottom: 10px;
color: #007bff;
}
/* Customizing the tab content paragraphs */
.tab-pane p {
line-height: 1.6;
}
/* Additional Styling for Tabs and Content */
.nav-tabs {
border-bottom: 2px solid #007bff;
}
.nav-tabs .nav-item {
margin-bottom: -1px;
}
.nav-tabs .nav-link {
border: 1px solid transparent;
border-radius: 0;
color: #007bff;
}
.nav-tabs .nav-link:hover {
border-color: #007bff;
}
.additional-content {
margin-top: 20px;
border: 1px solid #dee2e6;
padding: 20px;
border-radius: 5px;
background-color: #fff;
}
.additional-content h2 {
color: #007bff;
margin-top: 0;
}
.additional-content p {
line-height: 1.6;
}
</style>
</body>
</html>