Small change ...
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#menus { height:200px; width:200px; border:1px solid orange; }
#menu1 { display:block; }
#menu2 { display:none; }
</style>
</head>
<body>
<div id="menus">
<button onclick="toggleMenus('menu1',this)" style="float:left;background-Color:lime"> First </button>
<button onclick="toggleMenus('menu2',this)" style="float:right"> Second </button>
<br style="clear:both">
<div id="menu1">First menu display<br>
</div>
<div id="menu2">Second menu display<br>
</div>
</div>
<script type="text/javascript">
function toggleMenus(IDS,info) {
var sel = document.getElementById('menus').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
var sel = document.getElementById('menus').getElementsByTagName('button');
for (var i=0; i<sel.length; i++) { sel[i].style.backgroundColor = 'transparent'; }
document.getElementById(IDS).style.display = 'block';
info.style.backgroundColor = 'lime';
}
</script>
</body>
</html>