Toggle several divs http://blogs.html5andcss3.org/show-and-hide-multiple-div-using-javascript/
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>
<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>