JSFiddle - React, Tailwind, and code Playground

by bcaswell

HTML

<nav>
<button id="none">None</button>
<button data-bit="0">Menu Item 1</button>
<button data-bit="1">Menu Item 2</button>
<button data-bit="2">Menu Item 3</button>
<button data-bit="4">Menu Item 4</button>
<button data-bit="8">Menu Item 5</button>
</nav>

<section class="empty">
This is either the default value, displaying no menu items.. or you could hide this and display nothing!
</section>

<section data-bit="0">
    This is the contents of Menu Item 1
</section>

<section data-bit="1">
    This is the contents of Menu Item 2
</section>

<section data-bit="2">
    This is the contents of Menu Item 3
</section>

<section data-bit="4">
    This is the contents of Menu Item 4
</section>

<section data-bit="8">
    This is the contents of Menu Item 5
</section>

CSS

section {
  display:none;
  background-color:whitesmoke;
  border:0.1em outset whitesmoke;
  line-height:1.25em;
  padding:2em;
  }

section[data-bit] {
  display:none;
  }


button.check {
  border:0.1em inset whitesmoke;
  background-color:whitesmoke;
  }

JavaScript

var buttons = document.querySelectorAll("button[data-bit");
var sections = document.querySelectorAll("section[data-bit]");
var menuvalue = 0; //0 displays nothing
var clrBtn = document.querySelector("button#none");
var enums = document.querySelectorAll("section[data-enum]");


clrBtn.addEventListener("click", function() {
    menuvalue = 0;
    updateDisplay();
});

for(var i = 0, max = buttons.length; i < max ; i++)
{
  buttons[i].addEventListener("click", changeValue.bind(null, Math.pow(2, i)));
}

function changeValue(value) {
    menuvalue ^= value; // XOR operation assignment  (http://msdn.microsoft.com/en-us/library/ie/06f6ta51(v=vs.94).aspx)
    updateDisplay();
}

function updateDisplay()  {    
    for (var i = 0, max = sections.length; i < max; i++)
    {        
        sections[i].style.display = (menuvalue & Math.pow(2, i)) > 0 ? "block" : "none";      
    }
}