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-enum="" data-bit="0">
    This is the contents of Menu Item 1
</section>

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

<section data-enum="" data-bits="[0,1]">
    This is a combination of Menu Item 1 & Menu Item 2
</section>

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

<section data-enum="" data-bits="[0,2]">
    This is a combination of Menu Item 1 & Menu Item 3
</section>

<section data-enum=""data-bits="[1,2]">
    This is a combination of Menu Item 2 & Menu Item 3
</section>

<section data-enum="" data-bits="[0,1,2]">
    This is a combination of Menu Item 1, Menu Item 2 & Menu Item 3
</section>

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

<section data-enum="" data-bits="[0,4]">
    This is a combination of Menu Item 1 & Menu Item 4
</section>

<section data-enum="" data-bits="[1,4]">
    This is a combination of Menu Item 2 & Menu Item 4
</section>

<section data-enum="" data-bits="[0,1,4]">
    This is a combination of Menu Item 1, Menu Item 2 & Menu Item 4
</section>

<section data-enum="" data-bits="[2,4]">
    This is a combination of Menu Item 3 & Menu Item 4
</section>

<section data-enum="" data-bits="[0,2,4]">
    This is a combination of Menu Item 1, Menu Item 3 & Menu Item 4
</section>

<section data-enum="" data-bits="[1,2,4]">
    This is a combination of Menu Item 2, Menu Item 3 & Menu Item 4
</section>

<section data-enum="" data-bits="[0,1,2,4]">
    This is a combination of Menu Item 1, Menu Item 2, Menu Item...

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()  {
    var total = 0;
    
    for (var i = 0, max = sections.length; i < max; i++)
    {        
        flagValue = menuvalue & Math.pow(2, i); // if bit is set, value will be greater then 0
        total += flagValue;
        //sections[i].style.display = (& menuvalue) > 0 ? "block" : "none";      
    }
    hideAll(enums);
    
    if (menuvalue > 0) {
        enums[total - 1].style.display = "block";
    }
}

function hideAll(elms) {    
    for (var i = 0, max = elms.length; i < max; i++)
    {
        elms[i].style.display = "none";
    }
}