Material Style Tabs Component With JavaScript and CSS

Preview:

Description:

A pretty, Material Design style tabs component built using vanilla JavaScript, CSS and CSS3 transitions & transforms.

How to use it:

Build the tabbed contents and navigation as follows.

<div class="material-tabs">
  <div class="tabbed-section__selector">
    <a class="tabbed-section__selector-tab-1 active" href="#">Tab 1</a>
    <a class="tabbed-section__selector-tab-2" href="#">Tab 2</a>
    <a class="tabbed-section__selector-tab-3" href="#">Tab 3</a>
    <span class="tabbed-section__highlighter"></span>
  </div>

  <div class="tabbed-section-1 visible">
    Section 1
  </div>
  <div class="tabbed-section-2 hidden">
    Section 2
  </div>
  <div class="tabbed-section-3 hidden">
    Section 3
  </div>
</div>

The core CSS / CSS3 styles.

.material-tabs {
  display: block;
  float: left;
  padding: 16px;
  padding-top: 0;
  width: 100%;
  max-width: 480px;
  left: calc(50% - 480px/2);
  position: relative;
  margin: 96px auto;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
  border-radius: 2px;
}
@media all and (max-width: 480px) {
.material-tabs {
  max-width: 100%;
  left: 0;
}
}
.visible {
  position: relative;
  opacity: 1;
  width: 100%;
  height: auto;
  float: left;
  -webkit-transition: opacity .35s ease;
  transition: opacity .35s ease;
  z-index: 3;
}
.hidden {
  position: absolute;
  opacity: 0;
  z-index: 0;
  -webkit-transition: opacity 0s ease;
  transition: opacity 0s ease;
}
.tabbed-section__selector {
  position: relative;
  height: 32px;
  top: -31.2px;
  left: -16px;
  padding: 0;
  margin: 0;
  width: 100%;
  float: left;
}
.tabbed-section__selector [class*="-tab-"] {
  float: left;
  display: block;
  height: 32px;
  line-height: 32px;
  width: 100px;
  text-align: center;
  background: #fff;
  font-weight: bold;
  text-decoration: none;
  color: black;
  font-size: 14px;
}
.tabbed-section__selector [class*="-tab-"].active { color: #4F2CCA; }
.tabbed-section__selector a:first-child { border-top-left-radius: 2px; }
.tabbed-section__selector a:last-of-type { border-top-right-radius: 2px; }
.tabbed-section__highlighter {
  position: absolute;
  z-index: 10;
  bottom: 0;
  height: 2px;
  background: #4F2CCA;
  max-width: 100px;
  width: 100%;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  display: block;
  left: 0;
  -webkit-transition: -webkit-transform 0.23s ease;
  transition: transform 0.23s ease;
}
.tabbed-section__selector-tab-3.active ~ .tabbed-section__highlighter {
  -webkit-transform: translateX(200px);
  -ms-transform: translateX(200px);
  transform: translateX(200px);
}
.tabbed-section__selector-tab-2.active ~ .tabbed-section__highlighter {
  -webkit-transform: translateX(100px);
  -ms-transform: translateX(100px);
  transform: translateX(100px);
}
.tabbed-section__selector-tab-1.active ~ .tabbed-section__highlighter {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.divider {
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  display: block;
  float: left;
  width: 100%;
  height: 1px;
  margin: 8px 0;
  padding: 0;
  overflow: hidden;
}

The JavaScript.

var $ = function (selector) {
  return document.querySelectorAll(selector);
};

var tabs = [
  '.tabbed-section__selector-tab-1',
  '.tabbed-section__selector-tab-2',
  '.tabbed-section__selector-tab-3'
];
var toggleTab = function(element) {
  var parent = element.parentNode;
  
  $(element)[0].addEventListener('click', function(){
    this.parentNode.childNodes[1].classList.remove('active');
    this.parentNode.childNodes[3].classList.remove('active');
    this.parentNode.childNodes[5].classList.remove('active');
    this.classList.add('active');
    
    if(this.classList.contains('tabbed-section__selector-tab-1')) {
      // and change the classes, show the first content panel
      $('.tabbed-section-1')[0].classList.remove('hidden');
      $('.tabbed-section-1')[0].classList.add('visible');
      
      $('.tabbed-section-2')[0].classList.remove('visible');
      $('.tabbed-section-2')[0].classList.add('hidden');
       $('.tabbed-section-3')[0].classList.remove('visible');
      $('.tabbed-section-3')[0].classList.add('hidden');
    }
    if(this.classList.contains('tabbed-section__selector-tab-2')) {
      $('.tabbed-section-2')[0].classList.remove('hidden');
      $('.tabbed-section-2')[0].classList.add('visible');
      $('.tabbed-section-1')[0].classList.remove('visible');
      $('.tabbed-section-1')[0].classList.add('hidden');
      $('.tabbed-section-3')[0].classList.remove('visible');
      $('.tabbed-section-3')[0].classList.add('hidden');
    }
    
    if(this.classList.contains('tabbed-section__selector-tab-3')) {
      $('.tabbed-section-3')[0].classList.remove('hidden');
      $('.tabbed-section-3')[0].classList.add('visible');
      $('.tabbed-section-1')[0].classList.remove('visible');
      $('.tabbed-section-1')[0].classList.add('hidden');
      $('.tabbed-section-2')[0].classList.remove('visible');
      $('.tabbed-section-2')[0].classList.add('hidden');
    }
  });
};
for (var i = tabs.length - 1; i >= 0; i--) {
  toggleTab(tabs[i])
};