jQuery variable doesn't change outside of function

Question

I'm using the following code to show the sidebar when .sidebar-toggle is pressed, and hide the sidebar when #page is pressed.

Showing the sidebar works perfect, but it doesn't hide when #page is being pressed. It looks like the variable isn't set to 1 when the .sidebar-toggle has been clicked.

var state = 0;

if (state === 0) {
    $('.sidebar-toggle').click(function() {
        $('#page').animate({marginLeft: '230px'}, 400);
        state = 1;
    });
}

if (state === 1) {
    $('#sidebar').click(function() {
        $('#page').animate({marginLeft: '0'}, 400);
        state = 0;
    });
}

It would trigger on .sidebar-toggle click, not #page click--right? Can you include your relevant HTML? — Igor
– Igor, Commented Apr 20, 2013 at 14:39
the code just runs once. so the state === 1 will never be executed... — Luke
– Luke, Commented Apr 20, 2013 at 14:40

Filipe Tagliacozzi · Accepted Answer · 2013-04-20 14:51:11Z

1

You were forgetting to use the #page click.function ... and the best way is to put the if inside the click.function ... Try this way

var state = 0;

$('.sidebar-toggle').click(function() {
    if (state===0) {    
        $('#page').animate({marginLeft: '230px'}, 400);
        state = 1;
    }    
});

$('#page').click(function() {
    if (state===1){
        $('#page').animate({marginLeft: '0'}, 400);
        state = 0;
    }
});

edited Apr 20, 2013 at 14:51

answered Apr 20, 2013 at 14:38

Filipe Tagliacozzi

1,4312 gold badges20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adil Shaikh · Accepted Answer · 2013-04-20 14:40:05Z

0

May be because this never executed

if (state === 1) {
    $('#sidebar').click(function() {
        $('#page').animate({marginLeft: '0'}, 400);
        state = 0;
    });
}

Try this way -

var state = 0;
    $('.sidebar-toggle').click(function() {
       if (state === 0) {
        $('#page').animate({marginLeft: '230px'}, 400);
        state = 1;
       }
    });

    $('#page').click(function() {
       if (state === 1) {
        $('#page').animate({marginLeft: '0'}, 400);
        state = 0;
       }
    });

answered Apr 20, 2013 at 14:40

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Collectives™ on Stack Overflow

jQuery variable doesn't change outside of function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related