JSFiddle - React, Tailwind, and code Playground

by voronovam

HTML

<div id="js-navigation" class="ntk-top-menu-navigation">
  <div class="active">menu1</div><div>menu2</div>
</div>
<div class="ntk-top-menu">
  11111111111
</div> 
<div class="ntk-top-menu hide">
  22222222222
</div>

CSS

.hide {
  display:none;
}
.ntk-top-menu-navigation > div {
    display: inline-block;
    color: #e6a880;
    font-size: 14px;
    text-transform: uppercase;
    background: #cd5000;
    padding: 8px 20px;
    cursor: pointer;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 2px;
}
.ntk-top-menu-navigation > div.active {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    background: #ef6c00;
    padding: 8px 20px;
    cursor: pointer;

}
.ntk-top-menu {
  background: #ef6c00;
}

JavaScript

'use strict';

document.addEventListener('DOMContentLoaded', function () {
    var wrapnavs = document.getElementById('js-navigation'),
        navs = wrapnavs.getElementsByTagName('div');
    for( var i = 0; i < navs.length; i++ ){
        navs[i].addEventListener('click', selectMenu);
    }

    function selectMenu() {
        if(this.classList.contains('active')){
            this.classList.remove('active');
        } else {
            this.classList.add('active');
        }
    }

    console.log('get to the choppa!!!');

});