Angular ui router tab - hide div when active

Question

What is the easiest way to show/hide a div outside the tab content when on that specific tab only? My current example shows but I could not make it hide again.

Plunker: http://plnkr.co/edit/E6dK5C9ZxVQaicQgfS4w?p=preview

  <div class="border" ng-show="aboutTabActive == true">Show me when the "About Tab" is clicked.</div>

  <!-- NAVIGATION -->
  <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
          <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
      </div>
      <ul class="nav navbar-nav">
          <li><a ui-sref="home">Home</a></li>
          <li><a ui-sref="about" ng-click="aboutTabActive=true">About</a></li>
      </ul>
  </nav>

  <!-- MAIN CONTENT -->
  <div class="container">
      <div ui-view></div>
  </div>

Elgayed · Accepted Answer · 2017-03-09 16:39:01Z

1

<ul class="nav navbar-nav">
          <li><a ui-sref="home" ng-click="aboutTabActive=false">Home</a></li>
          <li><a ui-sref="about" ng-click="aboutTabActive=true">About</a></li>
      </ul>

answered Mar 9, 2017 at 16:39

Elgayed

1,22911 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ui router tab - hide div when active

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related