This is a working example, just click the spacebar on the keyboard. Copy the whole thing and open it in a browser to test:
<html>
<head>
<script type="text/javascript">
top.visible_div_id = 'right';
function toggle_visibility(id) {
var old_e = document.getElementById(top.visible_div_id);
var new_e = document.getElementById(id);
if(old_e) {
console.log('old', old_e, 'none');
old_e.style.display = 'none';
}
console.log('new', new_e, 'block');
new_e.style.display = 'block';
top.visible_div_id = id;
}
document.onkeydown = function(e) { // or document.onkeypress
e = e || window.event;
if (e.keyCode == 32) {
if (top.visible_div_id == "right") {
toggle_visibility('left')
} else{
toggle_visibility('right')
}
}
};
</script>
</head>
<body onload="toggle_visibility('left');">
<div >
Left
</div>
<div >
Right
</div>
<div id="left" >
This is the content for the left side
</div>
<div id="right" >
This is the content for the right side
</div>
</body>
</html>