How do I hide Bootstrap tab content?

In my Ember application I have a Bootstrap nav with nav-pills, which each show different content in a tab-content. None are active until clicked. What I want is to make the currently active tab (and pill) deactivate if clicked again, hiding all content.

<div class="col-sm-9 nav-pills">
  <ul class="nav nav-pills">
    <li><a class="tab-toggle" data-toggle="pill" href="#special-instructions">Special Instructions</a></li>
    <li><a class="tab-toggle" data-toggle="pill" href="#job-details">Job Details</a></li>
    <li><a class="tab-toggle" data-toggle="pill" href="#alerts">Alerts</a></li>
    <li><a class="tab-toggle" data-toggle="pill" href="#toolbox">Toolbox Talk</a></li>
    <li><a class="tab-toggle" data-toggle="pill" href="#load-cell">Load Cell</a></li>
  </ul>
</div>

<div class="tab-content job-info">
<div id="special-instructions" class="tab-pane fade in">
  <div class="row spacer-mb-1"></div>
  Special Instructions
</div>
<div id="job-details" class="tab-pane fade in">
  <div class="row spacer-mb-1"></div>
  Job Details
</div>
<div id="alerts" class="tab-pane fade in">
  <div class="row spacer-mb-1"></div>
  Alerts
</div>
<div id="toolbox" class="tab-pane fade in">
  <div class="row spacer-mb-1"></div>
  Toolbox Talk
</div>
<div id="load-cell" class="tab-pane fade in">
  <div class="row spacer-mb-1"></div>
  Load Cell
</div>
</div>

I'm new to Ember and not sure how to include jQuery in it. I have only a template and a route.