I want to utilize bootstrap's card/tab functionality to create a card with tabs. The card will have 3 tabs, each corresponding to its own active 'card body.'
Below is my existing code:
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="page-header">
<h2>Social Media</h2>
</div>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="card-body">
<div id="insta">Instagram</div>
<div id="face">Facebook</div>
<div id="twit">Twitter</div>
</div>
</div>
</div>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
The code builds the card correctly and displays the appropriate tab headers with their respective links.
My goal is to have the text display in the 'card body' only when the corresponding tab is active. Currently, all three lines of text are displaying in the main tab's body.
Although the javascript appears correct, the tabulation is not functioning as expected.
You can view the codepen here: