Multi Div Big Menu

by Cam Gould

HTML

<input type="button" name="open" value="Show Div" onclick="Menu1()" />
<input type="button" name="open" value="Show Div" onclick="Menu2()" />
<div id="menuDiv1" style="display:none;" class="big-menu" >DIV 1
    <input type="button" name="close" value="Close Div" onclick="MenuClose()" />
</div>
<div id="menuDiv2" style="display:none;" class="big-menu" >DIV 2
    <input type="button" name="close" value="Close Div" onclick="MenuClose()" />
</div>

CSS

input {
    background: #333;
    color: #fff;
    padding: 10px 20px;
    border: 0;
}
.big-menu {
    width: 100;
    background: #555;
    padding: 20px;
    color: #fff;
}

JavaScript

function Menu1() {
   document.getElementById('menuDiv1').style.display = "block";
   document.getElementById('menuDiv2').style.display = "none";
}
function Menu2() {
   document.getElementById('menuDiv1').style.display = "none";
   document.getElementById('menuDiv2').style.display = "block";
}
function MenuClose() {
   document.getElementById('menuDiv1').style.display = "none";
   document.getElementById('menuDiv2').style.display = "none";
}