Simple Tabs

by Yunus Gaziev

HTML

<ul class="tabs-btns">
  <li><a href="#foo">#foo</a></li>
  <li><a href="#bar">#bar</a></li>
  <li><a href="#baz">#baz</a></li>
</ul>
<div class="tabs-contents">
  <div class="tab-content is-show" id="foo">
    <h2>FOO</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="tab-content" id="bar">
    <h2>BAR</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
  </div>
  <div class="tab-content" id="baz">
    <h2>BAZ</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, tenetur.</p>
  </div>
</div>

CSS

.tabs-btns {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.tabs-btns li {
  display: inline-block;
  vertical-align: top;
}

.tab-content {
  display: none;
}

.is-show {
  display: block;
}

JavaScript

const tabBtns = $('.tabs-btns a');
const tabContent = $('.tab-content');

// by index
/* tabBtns.on('click', function(event) {
  event.preventDefault();
  
  const index = $(this).closest('li').index();
  
  tabContent.eq(index).show().siblings().hide().removeClass('is-show');
}); */

// by href
tabBtns.on('click', function(event) {
  event.preventDefault();
  
  const ID = $(this).attr('href').replace('#', '');
  
  tabContent
  	.hide().removeClass('is-show')
  	.filter(function(index, el) {
      return $(el).attr('id') == ID;
    }).show();
});