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.