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.

1 answer

  • answered 2018-11-08 17:03 Lux

    First, when you're using ember I strongly recommend you don't use the default bootstrap JS file! This does not really play well together with ember. However there is ember-bootstrap which gives you a component based API for the bootstrap functionalities.

    Oh, and jQuery is part of ember itself, however you can disable this for newer ember versions.

    However a simple tab navigation as you have is very easy to do with ember itself. Especially if you use ember-truth-helpers!

    You can use simple ifs for your tabs:

    <ul>
      <li role="button" onclick={{action 'activate' 'tab1'}}>Tab1</li>
      <li role="button" onclick={{action 'activate' 'tab2'}}>Tab2</li>
    </ul>
    
    {{#if (eq currentTab 'tab1')}}
      <div>
        Tab 1
      </div>
    {{/if}}
    
    {{#if (eq currentTab 'tab2')}}
      <div>
        Tab 2
      </div>
    {{/if}}
    

    And while I usually would do onclick={{action (mut currentTab) 'tab1'}} to activate tab1, here I've used an action.

    This is because of your special functionality:

    What I want is to make the currently active tab (and pill) deactivate if clicked again, hiding all content.

    This is now easy to implement in that actions:

    activate(name) {
      if(this.currentTab === name) {
        this.set('currentTab', '');
      } else {
        this.set('currentTab', name);
      }
    }
    

    And here is a twiddle implementing this solution.