Question

I am trying to use the right arrow key to change between classes but I am having problems with triggering the event with the arrow key. Instead it functions on mouse click. The right arrow key keyCode and which is 39. I have tried both and get the same result.

$(document).ready(function(){
    $(document).keyup(function(evt){
    console.log(evt.keyCode);// used to verify the keyCode 39

    if (evt.keyCode == 39) {
        $('body').toggle(function(){
            $('body').removeClass().addClass('narrow');

        }, function() {
        $('body').removeClass().addClass('large');

        }, function() {
        $('body').removeClass();
        });
        } 
        else {
        return false;
    };
    )
   });

Answer 1

Edit —

Everything is correct, except the toggle. Here is what I assume you are trying to do –

http://jsfiddle.net/jmsessink/nxJxj/3/

$(function() {

    $(document).keyup(function(evt) {

        if (evt.keyCode == 39) {

            if ($('body').hasClass('narrow')) {
                $('body').removeClass('narrow').addClass('large');
            } else if ($('body').hasClass('large')) {
                $('body').removeClass('large');
            } else {
                $('body').addClass('narrow');
            }

        }

    });

});