Auto Generate Tabbed Navigation With jQuery - Taby

Auto Generate Tabbed Navigation With jQuery - Taby

Taby is a lightweight, SEO-friendly jQuery plugin used to automatically generate a semantic tabs navigation for tabbed content within the document.

Clicking on the tabs will switch between tabbed content with fade in and fade out animations.

1. Create the tabbed content following the HTML structure as follows:

<div id="tabs" class="tabs">
  <div class="tabs__item">
    <div class="tabs__item--content">
      <h3 class="heading heading--medium">Title 1</h3>
      <p>Content 1</p>
    </div>
  </div>
  <div class="tabs__item">
    <div class="tabs__item--content">
      <h3 class="heading heading--medium">Title 2</h3>
      <p>Content 2</p>
    </div>
  </div>
  <div class="tabs__item">
    <div class="tabs__item--content">
      <h3 class="heading heading--medium">Title 3</h3>
      <p>Content 3</p>
    </div>
  </div>
  ...
</div>

2. Download and insert the JavaScript file jquery.tabs.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/jquery.tabs.js"></script>

3. Call the function tabs() on the top container.

$(document).ready(function(){
  
  $("#tabs").tabs();
  
});

4. This will generate a tabs navigation using HTML unordered list as follows:

<ul class="tabs-nav">
  <li class="tabs-nav__item tabs-nav_item--active">Title 1</li>
  <li class="tabs-nav__item">Title 2</li>
  <li class="tabs-nav__item">Title 3</li>
  <li class="tabs-nav__item">Title 4</li>
</ul>

5. Apply your own CSS styles to the tabs navigation.

<ul class="tabs-nav">
  <li class="tabs-nav__item tabs-nav_item--active">Title 1</li>
  <li class="tabs-nav__item">Title 2</li>
  <li class="tabs-nav__item">Title 3</li>
  <li class="tabs-nav__item">Title 4</li>
</ul>

This awesome jQuery plugin is developed by GrzegorzNecka. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 08.11.2018
  • Source