Chi · Tabs

Tabs

Tabs are used to navigate between views within the same context. This JavaScript solution is based on showing and hiding panels depending on the active tab. It also takes care of managing tabs classes correctly to show the proper state when clicking a tab. Finally, it adds the -animated class to the component by default (this removes the bottom border of the active element), and it is replaced by a sliding element that emulates the bottom border, that moves from the last active tab to the currently active tab when clicked.

Content for tab a

Content for tab b

Content for tab c

<ul class="a-tabs" id="example-tabs">
  <li class="-active"><a href="#a">Tab a</a></li>
  <li><a href="#b">Tab b</a></li>
  <li><a href="#c">Tab c</a></li>
</ul>

<div class="a-tabs-panel -active" id="a">
  <p class="-text">Content for tab a</p>
</div>
<div class="a-tabs-panel" id="b">
  <p class="-text">Content for tab b</p>
</div>
<div class="a-tabs-panel" id="c">
  <p class="-text">Content for tab c</p>
</div>

<script>chi.tab(document.getElementById('example-tabs'));</script>

Keep default link behavior

By default, Chi JavaScript enabled tabs will ignore default link behavior. To preserve it, specify a target property on the link.

Content for tab a

Content for tab b

Content for tab c

<ul class="a-tabs" id="example-tabs-2">
  <li class="-active"><a href="#a">Tab a</a></li>
  <li><a href="#b">Tab b</a></li>
  <li><a href="#c">Tab c</a></li>
  <li><a href="https://assets.ctl.io/chi/" target="_self">External Link</a></li>
</ul>

<div class="a-tabs-panel -active" id="a">
  <p class="-text">Content for tab a</p>
</div>
<div class="a-tabs-panel" id="b">
  <p class="-text">Content for tab b</p>
</div>
<div class="a-tabs-panel" id="c">
  <p class="-text">Content for tab c</p>
</div>

<script>chi.tab(document.getElementById('example-tabs-2'));</script>

Vertical

The script also handles vertical tabs.

Tab a
Tab b
Tab c

Content for tab a

Content for tab a-1

Content for tab a-2

Content for tab a-3

Content for tab b

Content for tab c

<ul class="a-tabs -vertical" id="example-tabs-3">
  <li class=" -active">
    <a href="#a3">Tab a</a>
    <ul class="a-tabs__subtabs">
      <li>
        <a href="#a3-1">Tab a-1</a>
      </li>
      <li>
        <a href="#a3-2">Tab a-2</a>
      </li>
      <li>
        <a href="#a3-3">Tab a-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#b3">Tab b</a>
  </li>
  <li>
    <a href="#c3">Tab c</a>
  </li>
</ul>
<div class="a-tabs-panel" id="a3">
  <p class="-text">
    Content for tab a
  </p>
</div>
<div class="a-tabs-panel" id="a3-1">
  <p class="-text">
    Content for tab a
  </p>
</div>
<div class="a-tabs-panel" id="a3-2">
  <p class="-text">
    Content for tab a
  </p>
</div>
<div class="a-tabs-panel" id="a3-3">
  <p class="-text">
    Content for tab a
  </p>
</div>
<div class="a-tabs-panel" id="b3">
  <p class="-text">
    Content for tab b
  </p>
</div>
<div class="a-tabs-panel" id="c3">
  <p class="-text">
    Content for tab c
  </p>
</div>

<script>chi.tab(document.getElementById('example-tabs3'));</script>

Preventing memory leaks

Tab components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

var elem = document.getElementById('example-tabs');
var tabComponent = chi.tab(elem);
// do stuff
tabComponent.dispose();

TipIt is safe to call the tab method more than once, as it will return any previously created tabs component associated to the trigger.

var elem = document.getElementById('example-tabs');
var tabComponent = chi.tab(elem);
var elem2 = document.getElementById('example-tabs');
var tabComponent2 = chi.tab(elem2);
tabComponent === tabComponent2; // returns true

tabComponent.dispose(); // Only have to do it once.