Vertical Tab

index.html

<div class="accordion-wrapper">
  <div class="accordion">
		<div class="tab">
      <label id="1">Login Form</label>
      <label id="2">Calculator</label>
      <label id="3">Shopping Cart</label>
      <label id="4">Tab</label>
      <label id="5">Accordion</label>
      <label id="6">Image Carousel</label>
    </div>
     
      <label id="1" class="mobile">Login Form</label>
      <section data-num="1" class="tab-content">
        Login Form Content
      </section>
      <label id="2" class="mobile">Calculator</label>
      <section data-num="2" class="tab-content">
        Calculator Content
      </section>
      <label id="3" class="mobile">Shopping Cart</label>
      <section data-num="3" class="tab-content">
        Shopping Cart Content
      </section>
      <label id="4" class="mobile">Tab</label>
      <section data-num="4" class="tab-content">
        Tab Content
      </section>
      <label id="5" class="mobile">Accordion</label>
      <section data-num="5" class="tab-content">
        Accordion Content
      </section>
      <label id="6" class="mobile">Image Carousel</label>
      <section data-num="6" class="tab-content">
        Image Carousel Content
      </section>
       
  </div>
</div>

script.js

(function(window) {

//variables
var tab = document.querySelectorAll('label');
var section = document.querySelectorAll('section');

//add event listener
for (var i = 0; i < tab.length; i++) {
    tab[i].addEventListener('click', displayContent);
}

//default tab
window.addEventListener('load', function load(event) {
  section[0].classList.add('display');
})

//function
function displayContent() {
  //check to see if active, if so, remove
  for (var a = 0; a < section.length; a++) {
    if (section[a].classList.contains('display'))   
     {
      section[a].classList.remove('display'); 
    }
    //add display class 
    if (this.id === section[a].dataset.num) {
      section[a].classList.add('display');
    }
  }
}

})(window);

style.css

.accordion-wrapper .accordion {
  display: flex;
  flex-flow: row;
}

.accordion-wrapper .tab {
  display: flex;
  flex-flow: column;
}

.accordion-wrapper label {
  background: gray;
  padding: 10px 20px;
  border: 1px solid #222;
}

.accordion-wrapper .mobile {
  display: none;
}

.accordion-wrapper .tab-content {
  float: left;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.accordion-wrapper section {
  display: none;
}

.accordion-wrapper .display {
  display: block;
  width: 100%;

}

@media (max-width: 600px) {
  .accordion-wrapper .accordion {
    display: flex;
    flex-flow: column wrap;
  }
  
  .accordion-wrapper .tab {
    display: none; 
  }
  
  .accordion-wrapper .tab-content {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: none;
    border-bottom: none;
  }
  
  .accordion-wrapper .tab-content:last-child {
    border-bottom: 1px solid black;
  }
  
  .accordion-wrapper label.mobile {
    display: block;
  }
  
  .accordion-wrapper section {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 1s ease-in-out;
  }
  
  .accordion-wrapper .display {
    height: 200px;
    transition: height 1s ease-in-out;
  }
}

vertical-tab.markdown

Vertical Tab

A Pen by Mai on CodePen.

License.