Toggle divs or their content on key click WITHOUT ajax or jquery library

Question

I found this code :

 <script>
document.onkeydown = function(e) { // or document.onkeypress
    e = e || window.event;
    if (e.keyCode == 32 || e.keyCode == 09) {
        alert("do something");
    }
};
</script>

It shows a pop up on spacebar or tab click. I don't want a pop up but the changing of the div.

I found another code which changes the div on click of text. Here is is:

<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;          
  }
  </script>
</head>
<body onload="toggle_visibility('left');">

<div onclick="toggle_visibility('left');">
  Left
</div>

<div onclick="toggle_visibility('right');" >
  Right
</div>

 <div id="left" >
    This is the content for the left side
 </div>

 <div id="right" >
    This is the content for the ride side
 </div>

-------
-------

</body>
</html>

I almost as if want to mix the codes, so they have the same effect but the text clicking replaced with keyboard click.

What I've tried is adding

 <script>
document.onkeydown = function(e) { // or document.onkeypress
    e = e || window.event;
    if (e.keyCode == 32 || e.keyCode == 09) {
        toggle_visibility('right');
    }
};
</script>

but this only worked on the first time and didn't actually toggle it. I could make it work with two different characters but I only want the spacebar. Hope you can help me figure this out.

score 0 · Answer 1 · answered Sep 12 '13 at 15:52

are you just trying to show and hide content in a div if so something along these lines should work

<div onkeydown="change();">
   <div id='div1'></div>
   <div id='div2'></div>
</div>

<script>
function change(){
//Hide the content
    document.getElementById('div1').style.display = "none";
//Show new content
    document.getElementById('div2').style.display = "block";
 }
</script>

bitoiu · Accepted Answer · 2013-09-12T16:01:26.873

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>

no, You used right and left keys. I need a toggle so if they click the spacebar it changes right then they click it again it changes left. — , Sep 12 '13 at 16:01
i changed both the numbers to 32 . It will go only to the right. How'd you get it? — , Sep 12 '13 at 16:03
Copy the whole thing again, it's working, just tested it again! — bitoiu, Sep 12 '13 at 16:04

Toggle divs or their content on key click WITHOUT ajax or jquery library

2 Answers2