encima
3/30/2020 - 12:12 PM

Vanilla JS Tachyons Tabs Component

index.html
content_copyfile_download
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="tachyons.min.css"/>
  </head>

<body>
  <div class="tabs mw6 center mt5">
    <div class="tabs__menu flex mb5 bb b--black-20">
      <label for="section1" class="tabs__menu-item w-third tc bg-white pt4 pb4 bg-animate hover-bg-white pointer red">What does it do?</label>
      <label for="section2" class="tabs__menu-item w-third tc pt4 pb4 bg-animate hover-bg-white pointer">
        How do I use it?
      </label>
    </div>
    <div class="tabs__content">
      <div>
        <input type="radio" class="dn" name="sections" id="section1" checked>
        <div class="tabs__content__info">
          <div class="outer-wrapper">
            <div class="what-container">
         
            </div>
          </div>
        </div>
      </div>
      <div>
        <input type="radio" class="dn" name="sections" id="section2">
        <div class="tabs__content__info">
          <div class="outer-wrapper">
            <div class="how-container">
         
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
<script src="tabs.js"
</body>

</html>
tabs.js
content_copyfile_download
initialize();

function initialize() {
  [].slice.call(document.querySelectorAll(".tabs__menu-item")).map(tab => {
    tab.addEventListener("click", function(ev) {
      [].slice.call(document.querySelector(".tabs__menu").children).map(sibling => {
        sibling.classList.toggle('bg-white')
        sibling.classList.toggle('red')
      })
    })
  })
}