How to show element when a key is pressed, then if it is pressed again, hide the element?

Question

I have this project where I have a side menu which can be toggled using [Ctrl] + [Z]. I want it to hide the very next time the [Ctrl] + [Z] pattern is pressed. My mediocre knowledge of JavaScript hinders me being able to phrase it using google, so I ultimately didn't find anything, so I'm coming here. With the amount of JavaScript I know this technically should work, but logically wouldn't work. Any ideas? Here's my code:

var letter = {
    z: 90
    ...

};

$(document).ready(function() {

    $("body").keydown(function(event) {

            // toggles element the first time
        if(event.ctrlKey && event.which === letter.z) {
            $("[data-location='top']").slideDown("fast");
            $("[data-location='bottom']").slideDown("fast");
        }

            // hides element the second time
        if(event.ctrlKey && event.which === letter.z) {
            $("[data-location='top']").slideUp("fast");
            $("[data-location='bottom']").slideUp("fast");
        }

    });

});

Any help would be very much appreciated! :-)

Answer 1

The .slideToggle() function is what you're looking for.

var letter = {
    z: 90
    ...

};

    $(document).ready(function() {

        $("body").keydown(function(event) {

            if(event.ctrlKey && event.which === letter.z) {
                $("[data-location='top']").slideToggle("fast");
                $("[data-location='bottom']").slideToggle("fast");
            }

        });

    });

Answer 2

JavaScript:

var letter = {
    z: 90

};

$(document).ready(function() {
var visible = false;
    $("body").keydown(function(event) {

            // toggles element the first time
        if(!visible && event.ctrlKey && event.which === letter.z) {
            visible = true;
            $("[data-location='top']").slideDown("fast");
            $("[data-location='bottom']").slideDown("fast");
        } else if(visible && event.ctrlKey && event.which === letter.z) {
            visible = false;
            $("[data-location='top']").slideUp("fast");
            $("[data-location='bottom']").slideUp("fast");
        }


    });

});​

HTML:

<div id="top" class="hidden" data-location="top"></div>
<div id="bottom" class="hidden" data-location="bottom"></div>​

CSS:

#top {height:100px;width:500px;background-color:red;}
#bottom {height:100px;width:500px;background-color:blue;}
.hidden {display:none;}

Fiddle

Answer 3

You only need to bind once to keydown, and then thrw your logic in there. So you code will become:

var letter = {
    z: 90
    ...

};

$(document).ready(function() {

    $("body").keydown(function(event) {

            // toggles element the first time
        if(event.ctrlKey && event.which === letter.z) {
            $("[data-location='top']").toggle("fast");
            $("[data-location='bottom']").toggle("fast");
        }

    });

});