Jquery's $('#element').on/off doesn't work after the second time

Question

I have the following jQuery code (my first homemade jQuery code, so don't be too hard on me :) ). Eveything works perfectly for the first time I use the toggles:

• I click on the right toggle, #content moves and left toggle appears.
• I click on the left toggle, #content moves back and right toggle appears. (everything is back to starting position).

But after that, my right toggle isn't clickable anymore (it does appear though). I would like to do the same thing over and over again ( click right toggle, #content moves etc etc). But with my current code, I'm only able to do this animation once.

Can anyone help me out :)?

Thanks in advance :)

    //starting values 
    $(".rowToggleL").off('click');    
    $(".rowToggleR").on('click'); 

    //Right Toggle
    $(".rowToggleR").click(function () {

        // make Toggle Right unclickable, make Toggle Left clickable
        $(".rowToggleR").off('click'); 
        $(".rowToggleL").on('click'); 


        //animate contentbox
        $("#content").animate({
            left: "-=300" // animate to the right
        }, 800, 

         // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
        function() {
            $(".rowToggleR").css("display", "none");
            $(".rowToggleL").css("display", "inline");
        });


    });

    //Left Toggle
    $(".rowToggleL").click(function () {

        // make Toggle Left  unclickable, make Toggle Right clickable
        $(".rowToggleL").off('click');    
        $(".rowToggleR").on('click'); 

     //animate contentbox
        $("#content").animate({
            left: "+=300" // animate to the right
        }, 800, 

         // Animation complete. Make Toggle Left invisible, make Toggle Right visible.
        function() {
            $(".rowToggleL").css("display", "none");

            $(".rowToggleR").css("display", "inline");   
        });

    });

Answer 1

You have a lot of unnecessary code. You don't need the on and off. Also jquery has a hide and show function. This should work:

//Right Toggle
$(".rowToggleR").click(function() {
    //animate contentbox
    $("#content").animate({
        left: "-=300" // animate to the right
    }, 800,
            // Animation complete. Make Toggle Right invisible, make Toggle Left visible 
                    function() {
                        $(".rowToggleR").hide();
                        $(".rowToggleL").show();
                    });


        });

//Left Toggle
$(".rowToggleL").click(function() {
    //animate contentbox
    $("#content").animate({
        left: "+=300" // animate to the right
    }, 800,
            // Animation complete. Make Toggle Left invisible, make Toggle Right visible.
                    function() {
                        $(".rowToggleL").hide();
                        $(".rowToggleR").show();
                    });

        });

Answer 2

Because jQuery's on and off are not toggles for previously set handlers!

When you call on(), you add an handler (a function) to an event. But when you call off(), you remove all the handlers attached to an event.

When you call on('click'), you do not reactivate the handler you previously set with :

$(".rowToggleR").click(function () {});  // Which equals $(".rowToggleR").on('click', function () {});

But instead, you add another function to call when it's clicked.