Creating a tab is the same as creating a basic HTML document where anchor links navigate to defined sections of the page.

With the styling and JavaScript in place, these links and document sections will automatically show and hide as you would expect from a tabbed content area.

Remember the data-ks-tabs attribute.

Internet
Encyclopedia
Papyrus

<ul class="tabs" id="ages" data-ks-tabs>
  <li class="open">
    <a href="#modern">Modern</a>
  </li>
  <li>
    <a href="#old">Old</a>
  </li>
  <li>
    <a href="#ancient">Ancient</a>
  </li>
</ul>

<div class="tab_pane_container">
  <article id="modern">
    Internet
  </article>
  <article id="old">
    Encyclopedia
  </article>
  <article id="ancient">
    Papyrus
  </article>
</div>


.tabs {
  @include tabs();
}
.tab_pane_container {
  @include tab_pane_container();
}

Optionally, you can omit the data attribute and instantiate the tabs via k$.tabs() Pass in either the string that selects the selector of the ul that will become the tab bar, or the element itself.

k$.tabs('#ages');

// or

$tabs = document.querySelector('#ages');
k$.tabs($tabs);