JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<h2>Simple Tab</h2>
<ul id='tabs'>
    <li><a href='#tabA'>Tab A</a></li>
    <li><a href='#tabB'>Tab B</a></li>
    <li><a href='#tabC'>Tab C</a></li>
</ul>
<div id='tabA' class='tab'>Tab A Content</div>
<div id='tabB' class='tab'>Tab B Content</div>
<div id='tabC' class='tab'>Tab C Content</div>

 <h2>Simple Tab</h2>
<ul id='tabs2'>
    <li><a href='#tabD'>Tab A</a></li>
    <li><a href='#tabE'>Tab B</a></li>
    <li><a href='#tabF'>Tab C</a></li>
</ul>
<div id='tabD' class='tab'>Tab A Content</div>
<div id='tabE' class='tab'>Tab B Content</div>
<div id='tabF' class='tab'>Tab C Content</div>

JavaScript

(function() {
  // returns the tab content for a tab
  var tab = function(li) {
    return $(li.find("a").attr("href"))
  },
    
  // deactivate the old active tab, mark the li as active
  activate = function(li) {
    tab(li.siblings('.active')
          .removeClass('active')).hide()
    tab(li.addClass('active')).show();
  },
    
  // activates the tab on click
  tabClick = function(ev) {
    ev.preventDefault();
    activate($(ev.currentTarget))
  }
    
  // a simple tab plugin
  $.fn.simpleTab = function() {

    this.each(function() {
      var el = $(this);

      el.addClass("tabs").delegate("li", "click",tabClick)
          .children("li:gt(0)")
          .each(function() {
            tab($(this)).hide();
          });

      activate(el.children("li:first"));
    })
  }
})();

$('#tabs').simpleTab();
$('#tabs2').simpleTab();