Toggle several divs http://blogs.html5andcss3.org/show-and-hide-multiple-div-using-javascript/

buttons.html

<div class="buttons">
  <a href="#" onclick="toggleVisibility('Menu1');">Menu1</a>
  <a href="#" onclick="toggleVisibility('Menu2');">Menu2</a>
  <a href="#" onclick="toggleVisibility('Menu3');">Menu3</a>
  <a href="#" onclick="toggleVisibility('Menu4');">Menu4</a>
</div>
 
  <div id="Menu1">I'm container one</div>
  <div id="Menu2" style="display: none;">I'm container two</div>
  <div id="Menu3" style="display: none;">I'm container three</div>
  <div id="Menu4" style="display: none;">I'm container four</div>

toggle-divs.js

var divs = ["Menu1", "Menu2", "Menu3", "Menu4"];
var visibleDivId = null;
function toggleVisibility(divId) {
  if(visibleDivId === divId) {
    //visibleDivId = null;
  } else {
    visibleDivId = divId;
  }
  hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
  var i, divId, div;
  for(i = 0; i < divs.length; i++) {
    divId = divs[i];
    div = document.getElementById(divId);
    if(visibleDivId === divId) {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
}
</script>