jQuery alternate between two functions using keyboard key

Question

I'm trying to execute/alternate two functions pressing the same key two time on the keyboard, but after the first keydown I don't get anything else. I need the box to open when key is pressed the first time, and than it should be closed when key is pressed the second time.

I need to achieve this:

First box -> F1 key (open/close);

Second box -> F2 Key (open/close);

Third box -> F3 Key (open/close);

The open/close action is only for explanation purpose, what it will actually do is to execute a litte function()

Here is my code ( i got the jquery from here )

<div class="time one">
<p>You can see this if you click F1</p>
</div>

<div class="time two">
<p>You can see this if you click F2</p>
</div>

<div class="time three">
<p>You can see this if you click F3</p>
</div>


$(document).keydown(function(e) {
    switch(e.which) {

    case 112: // F1 on keyboard

    function a(el){
        $(el).animate({width: "260px"}, 1500); 
    }
    function b(el){
        $(el).animate({width: "30px"}, 1500);
    }
    var el = $('.one');
    return (el.tog^=1) ? a(el) : b(el);
    break;
    case 113: // F2 on keyboard

    function a(el){
        $(el).animate({width: "260px"}, 1500); 
    }
    function b(el){
        $(el).animate({width: "30px"}, 1500);
    }
    var el = $('.two');
    return (el.tog^=1) ? a(el) : b(el);
    break;
    case 114: // F3 on keyboard

    function a(el){
        $(el).animate({width: "260px"}, 1500); 
    }
    function b(el){
        $(el).animate({width: "30px"}, 1500);
    }
    var el = $('.three');
    return (el.tog^=1) ? a(el) : b(el);
    break;

    default: return; // exit this handler for other keys
    }
  e.preventDefault(); // prevent the default action
});

When I press F1 the first time it works, but than nothing more happens. Can someone help? JSFiddle is here

Answer 1

One possible solution http://jsfiddle.net/ex3gckhk/12/

$(function(){
    var F1 = 112;
    var F2 = 113;
    
    function toggleWidth ($element) {
        if ($element.hasClass('extended')) {
            $element.animate({width: "30px"}, 1500);
            $element.removeClass('extended');
        } else {
            $element.animate({width: "260px"}, 1500);
            $element.addClass('extended');
        }
    }
    
    $(document).keyup(function(e) {
        e.preventDefault();
        
        var $element = null;
        
        switch (e.which) {
            case F1: $element = $('.one');
                break;
            case F2: $element = $('.two');
                break;
            default: break;
        }
        
        if ($element) {
            toggleWidth($element);
        }
    });
});

<div class="time one">
    <p>You can see this if you click</p>
</div>
  
<div class="time two">
    <p>You can see this if you click</p>
</div>
 
<div class="time three">
    <p>You can see this if you click</p>
</div>

Answer 2

Your code always executes function a because you are redeclaring the variable el everytime the key is pressed, so (el.tog^=1) will always be the same value.

You need to declare el variable outside the keydown event:

    var el = $('.one');
    $(document).keyup(function(e) {
        switch(e.which) {

            case 13: // F1 on keyboard
                function a(el){
                    $(el).animate({width: "260px"}, 1500);
                }
                function b(el){
                    $(el).animate({width: "30px"}, 1500);
                }
                var rez = (el.tog^=1) ? a(el) : b(el);
                return rez;

            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });