Second click happening in the same click function

Question

I want to make a flipping slidepanel. The JavaScript I came up with is this:

$(document).ready(function(){

    $('.menu').click(function(){

        $('.sidepanel').animate({"width":"5%"});
        $('.rightpanel').animate({"width":"95%"});


        if($('.sidepanel').css("width","5%")){

        $('.sidepanel').animate({"width":"30%"});
        $('.rightpanel').animate({"width":"70%"});


        }

        else{

        $('.sidepanel').animate({"width":"5%"});
        $('.rightpanel').animate({"width":"95%"});
        }

    });

});

What is happening is that when I click on the "menu", it rolls back to width of 5%,, but again goes to 30%, which I want it to go in the second click. I also used another way:

$(document).ready(function(){

    $('.menu').click(function(){

        $('.sidepanel').animate({"width":"5%"});
        $('.rightpanel').animate({"width":"95%"});


    }, function(){

        $('.sidepanel').animate({"width":"30%"});
        $('.rightpanel').animate({"width":"70%"});
    });

});

That also not worked. How can I tell jQuery to do something ON THE SECOND CLICK? http://jsfiddle.net/Ju5va/

your assigning 2 click events to that .menu you know.. you should use a bool or an if statement instead of two functions. — JF it, Apr 02 '14 at 16:21
The if statement should be like `if($('.sidepanel').css("width") == "5%"){` — Aamir Afridi, Apr 02 '14 at 16:22
I don't see where [jQuery `.click()`](http://api.jquery.com/click/) allows you to insert two functions. Before trying all kinds of random nonsense, just look at the documentation. — Sparky, Apr 02 '14 at 16:45

score 0 · Answer 1 · answered Apr 02 '14 at 16:23

You are using a setter version of .css() which returns a jQuery object, so it will always be truthy.

Try using a flag like

$(document).ready(function () {
    var flag = false;
    $('.menu').click(function () {
        if (flag) {
            $('.sidepanel').animate({
                "width": "30%"
            });
            $('.rightpanel').animate({
                "width": "70%"
            });
        } else {
            $('.sidepanel').animate({
                "width": "5%"
            });
            $('.rightpanel').animate({
                "width": "95%"
            });
        }
        flag = !flag;

    });
});

Demo: Fiddle

A shortened way of the same is

$(document).ready(function () {
    var flag = false;
    $('.menu').click(function () {
        var side = flag ? 30 : 5;
        $('.sidepanel').stop(true).animate({
            "width": side + "%"
        });
        $('.rightpanel').stop(true).animate({
            "width": (100 - side) + "%"
        });
        flag = !flag;
    });
});

Demo: Fiddle

@user3450590 we are switching the value of flag from true to false and from falst to true — Arun P Johny, Apr 02 '14 at 23:06

score 0 · Answer 2 · edited May 23 '17 at 10:31

I'm going to read back the first section of code to you:

When menu is clicked
change side panel width to 5%
change right panel width to 95%
if the side panel width is 5% -- two lines above we've set it that way so the if statement will always be evaluated as true whenever the click happens
set the side panel to 30%
set the right panel to 70%

Change your code to:

$(document).ready(function() {
    $('.menu').click(function() {
        var width = 100 * parseFloat($('.sidepanel').css('width')) / parseFloat($('.sidepanel').parent().css('width'));
        width = Math.round(width) + '%';
        if(width === "5%") {
            $('.sidepanel').animate({"width": "30%"});
            $('.rightpanel').animate({"width": "70%"});
        } else {
            $('.sidepanel').animate({"width":"5%"});
            $('.rightpanel').animate({"width":"95%"});
        }
    });
});

which will read:

when it is clicked
if it is narrow
make it wide
otherwise
make it narrow

and a working JSfiddle thanks in part to get CSS rule's percentage value in jQuery

score 0 · Answer 3 · answered Apr 02 '14 at 16:29

changed your code little bit:

      $(document).ready(function(){
            var x=true
                $('.sidepanel').animate({"width":"30%"});
                $('.rightpanel').animate({"width":"70%"});

            $('.menu').click(function(){




                if(x===true){

                $('.sidepanel').animate({"width":"5%"});
                $('.rightpanel').animate({"width":"95%"});
                x=false

                }

                else{

                $('.sidepanel').animate({"width":"30%"});
                $('.rightpanel').animate({"width":"70%"});
                x=true
                }

            });

        });

Thanks, @arvind, it worked. Can i use 'return true' instead of var x = true or 'return false' for var x= false ? If yes, please give code. Thanks again — user3450590, Apr 02 '14 at 17:18

Second click happening in the same click function

3 Answers3