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");


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

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

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

function setDisplay()  {
    for (var i = 0, max = sections.length; i < max; i++)
    {
        
        console.log("section: %o, menuvalue: %o, result: %o", Math.pow(2, i), menuvalue, (Math.pow(2, i) & menuvalue));
        sections[i].style.display = (Math.pow(2, i) & menuvalue) > 0 ? "block" : "none";      
    }
}
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;
  }
<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>
</script>