Bootstrap 4 card navs not hiding un-selected content

I have a fiddle that is trying to use Bootstrap 4 card navs. The tabs appear but clicking them does not hide the non-active tabs. There must be a config item that I have left out but I am not seeing it. Help?

The code in the fiddle is:

<div id="content" class="container">
<div class="card">
<div class="card-header bg-dark">
<ul id="ActionNav" class="nav nav-tabs bg-dark card-header-tabs"
role="tablist">
<li class="nav-item">
<a id="about-tab" class="nav-link active" href="#about"
data-toggle="tab"
role="tab" aria-controls="about"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a id="training-tab" class="nav-link" href="#training"
data-toggle="tab"
role="tab" aria-controls="training"
aria-selected="false">HPC Training</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="about" role="tabpanel"
aria-labelledby="about-tab">
<h2 class="card-title">Training</h2>
<p class="card-text">first paragraph</p>
<p class="card-text">second paragraph</p>
</div>
</div>
<div class="tab-pane fade" id="training" role="tabpanel"
aria-labelledby="training-tab">
<h2 class="card-title">Training Opportunities</h2>
<p class="card-text">training 1</p>
<p class="card-text">training 2</p>
</div>
</div>
</div>
</div>


Edit
The fiddle has jQuery activated. When you run the fiddle the default "home" tab does appear. When you then click the "training" tab the training content appears below the home content. The home "tab" is not hidden. Then clicking on either tab appears to do nothing.

Edit 2
My problem was a misplaced </div>. I had two tab-pane blocks but the second pane was outside the tab-content block.

</div>

tab-pane

tab-content

1 Answer
1

<div id="content" class="container">
<div class="card">
<div class="card-header bg-dark">
<ul id="ActionNav" class="nav nav-tabs bg-dark card-
header-tabs" role="tablist">
<li class="nav-item">
<a id="about-tab" class="nav-link active"
href="#about" data-toggle="tab" role="tab" aria-controls="about"
aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a id="training-tab" class="nav-link"
href="#training" data-toggle="tab" role="tab" aria-
controls="training"
aria-selected="false">HPC Training</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="about"
role="tabpanel" aria-labelledby="about-tab">
<h2 class="card-title">Training</h2>
<p class="card-text">first paragraph</p>
<p class="card-text">second paragraph</p>
</div>
<div class="tab-pane fade" id="training"
role="tabpanel" aria-labelledby="training-tab">
<h2 class="card-title">Training
Opportunities</h2>
<p class="card-text">training 1</p>
<p class="card-text">training 2</p>
</div>
</div>
</div>


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy