Menu
I am using html tabs on a custom page that integrates with my wordpress site.
The code below is for setting up tabs but all the content from each tab is coming through on all the tabs and not just the specific area it is for.
The code below pulls in javascript from an external source.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Dynamic Tabs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
<li><a data-toggle="tab" href="#sectionB">Section B</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active" style="padding-top:100px">
<p>Testing Section A</p>
</div>
</div>
<div class="tab-content">
<div id="sectionB" class="tab-pane fade in" style="padding-top:100px">
<p>Testing Section B</p>
</div>
</div>
</div>
</body>
</html>
883
asked Jan 27 '26 00:01
You only need to define the tab-content div once, you are doing it twice.
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
<li><a data-toggle="tab" href="#sectionB">Section B</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active" style="padding-top:100px">
<p>Testing Section A</p>
</div>
<div id="sectionB" class="tab-pane fade in" style="padding-top:100px">
<p>Testing Section B</p>
</div>
</div>
</div>
See this JSFiddle which I created using your code which demonstrates how it should work.
123
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
