Material Design vanilla javascript tabs

index.html

<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">
    <h3>Hello World</h2>
    <span class="divider"></span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel modi facere eius, sapiente aut rerum quae consequatur temporibus nam iste voluptates velit placeat sunt natus quia cupiditate assumenda eum ratione.</p>
  </div>
  <div class="tabbed-section-2 hidden">
    <h3>What is it ?</h3>
    <span class="divider"></span>
    <p>This is a small pen to show how to create a tabbed content & navigation, using vanilla Javascript</p>
    <p>The style is following some Material design specifications</p>
    <p>Feel free to fork, use, or share if you ever find it useful</p>
  </div>
  <div class="tabbed-section-3 hidden">
    <img src="http://thecatapi.com/api/images/get?format=src&type=gif" alt="http://thecatapi.com/api/images/get?format=src&type=gif" />
  </div>
</div>

Material Design vanilla javascript tabs.markdown

Material Design vanilla javascript tabs

Just sharing a vanilla JS tabs system i created for a personal use.

For this demo, the background is from http://www.oxygenna.com/news/free-new-set-of-material-design-backgrounds

A Pen by LukyVJ on CodePen.

License.

script.js

// TOGGLE SECTIONS
// querySelector, jQuery style
var $ = function (selector) {
  return document.querySelectorAll(selector);
};


// Define tabs, write down them classes
var tabs = [
  '.tabbed-section__selector-tab-1',
  '.tabbed-section__selector-tab-2',
  '.tabbed-section__selector-tab-3'
];

// Create the toggle function
var toggleTab = function(element) {
  var parent = element.parentNode;
  
  // Do things on click
  $(element)[0].addEventListener('click', function(){
    // Remove the active class on all tabs.
    // climbing up the DOM tree with `parentNode` and target 
    // the children ( the tabs ) with childNodes
    this.parentNode.childNodes[1].classList.remove('active');
    this.parentNode.childNodes[3].classList.remove('active');
    this.parentNode.childNodes[5].classList.remove('active');

    // Then, give `this` (the clicked tab), the active class
    this.classList.add('active');
    
    // Check if the clicked tab contains the class of the 1 or 2
    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');
      
      // Hide the second
      $('.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')) {
      // and change the classes, show the second content panel
      $('.tabbed-section-2')[0].classList.remove('hidden');
      $('.tabbed-section-2')[0].classList.add('visible');
      // Hide the first
      $('.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')) {
      // and change the classes, show the second content panel
      $('.tabbed-section-3')[0].classList.remove('hidden');
      $('.tabbed-section-3')[0].classList.add('visible');
      // Hide the first
      $('.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');
    }
  });
};

// Then finally, iterates through all tabs, to activate the 
// tabs system.
for (var i = tabs.length - 1; i >= 0; i--) {
  toggleTab(tabs[i])
};

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto);

$main-size: 16px;

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  float: left;
  padding: 0;
  margin: 0;
}

body {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/mb-bg-fb-03.jpg)no-repeat center center / cover;
  font-family: "RobotoDraft","Roboto",'Helvetica Neue',sans-serif;
  font-size: 16px;
} 

h1, h2, h3, h4 {
  padding: 0;
  margin: .1rem 0;

  border-left: 4px solid #4F2CCA;
  padding-left: 8px;
}

// Material tabs
.material-tabs {
  display: block;
  float: left;
  padding: $main-size;
  padding-top: 0;
  width: 100%;
  max-width: 480px;
  left: calc(50% - 480px/2);  
  position: relative;
  margin: $main-size*6 auto;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23)!important;
  border-radius: 2px;

  @media all and (max-width: 480px) {
    max-width: 100%;
    left: 0;
  }
}

.visible {
  position: relative;
  opacity: 1;
  width: 100% ;
  height: auto;
  float: left;
  transition: opacity .35s ease;
  z-index: 3;
}
.hidden {
  position: absolute;
  opacity: 0;
  z-index: 0;
  transition: opacity 0s ease;
  img {
    display: none;
  }
}

[class*="tabbed-section-"] {
  float: left; 
  color: #000;  

  img {
    display: block;
    width: 80%;
    margin: auto 10%;
  }
}


.tabbed-section__selector {
  position: relative;
  height: $main-size*2;
  top: -$main-size*1.95;
  left: -$main-size;
  padding: 0;
  margin: 0;
  width: 100%;
  float: left;

  [class*="-tab-"] {
    float: left;
    display: block;
    height: $main-size*2;
    line-height: $main-size*2;
    width: 100px;
    text-align: center;
    background: #fff;
    font-weight: bold;
    text-decoration: none;
    color: black;
    font-size: 14px;


    &.active {
      color: #4F2CCA;
    }
  }

  a:first-child {
    border-top-left-radius: 2px;
  }
  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%;
  transform: translateX(0);
  display: block;
  left: 0;
  transition: transform .23s ease ;
}



.tabbed-section__selector-tab-3.active ~ .tabbed-section__highlighter {
  transform: translateX(200px);
}
.tabbed-section__selector-tab-2.active ~ .tabbed-section__highlighter {
  transform: translateX(100px);
}
.tabbed-section__selector-tab-1.active ~ .tabbed-section__highlighter {
  transform: translateX(0);
}


.divider {
  background: rgba(0,0,0,.1); 
  position: relative;
  display: block;
  float: left;
  width: 100%;
  height: 1px;
  margin: 8px 0;
  padding: 0;
  overflow: hidden;
}