Using toogle to show/hide the div, I've got a problem that when I hide my div with anothor function, I have to click twice on the button to perform correct action.

Is there any way change the toggle switch like I clicked the button?

$('#add_task').toggle(function() { 
    if ($("#new_task_status").attr("value")==0) { 
        $("#new_task").slideDown();
        $("#new_task_status").attr("value", "1");
    }
}, function() {
    if ($("#new_task_status").attr("value")==1) { 
        $("#new_task").slideUp();
        $("#new_task_status").attr("value", "0");
    }
});


$('nav').click(function() { 
    if ($("#new_task_status").attr("value")==1) { 
        $("#new_task_status").attr("value", "0");
        $("#new_task").slideUp();
    }
});

Using toogle to show/hide the div, I've got a problem that when I hide my div with anothor function, I have to click twice on the button to perform correct action.

Is there any way change the toggle switch like I clicked the button?

$('#add_task').toggle(function() { 
    if ($("#new_task_status").attr("value")==0) { 
        $("#new_task").slideDown();
        $("#new_task_status").attr("value", "1");
    }
}, function() {
    if ($("#new_task_status").attr("value")==1) { 
        $("#new_task").slideUp();
        $("#new_task_status").attr("value", "0");
    }
});


$('nav').click(function() { 
    if ($("#new_task_status").attr("value")==1) { 
        $("#new_task_status").attr("value", "0");
        $("#new_task").slideUp();
    }
});

• javascript
• jquery
• toggle

Share Improve this question Follow asked May 27, 2010 at 11:41 Zier Gofren SchlanumZier Gofren Schlanum 5111 silver badge22 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

You could change your .toggle() so it doesn't matter, like this:

$('#add_task').click(function() { 
  $("#new_task").slideToggle(function() {
    $("#new_task_status").val($(this).is(':visible') ? 1 : 0);
  });
});

This does a slideToggle() instead, so the current state doesn't matter...when it finishes sliding, if it's shown (you opened it) you get a 1 in the input, otherwise you get a 0. Also, use .val() for input setting, much easier and more universal (I'm assuming it's an input here since that's most likely).

No, you would have to implement your own alternative to the toggle() function, which checks the current state of the element.

I don't see any need to use toogle at all. You can do the same with just a click handler:

$('#add_task').click(function() { 
    if ($("#new_task_status").attr("value")==0) { 
        $("#new_task").slideDown();
        $("#new_task_status").attr("value", "1");
    } else  {
        $("#new_task").slideUp();
        $("#new_task_status").attr("value", "0");
    }
});

and then:

$('nav').click(function() { 
    $('#add_task').click();
});

Btw. nav is not a HTML element. You probably mean #nav (maybe just a typo).

And as Nick already mentioned, consider to use .val().

I suggest an event-driven approch, like:

$("#add_task").bind({
    "toggle": function(e) {
    $("#add_task").trigger(($("#new_task_status").attr("value")==0) ? "open" : "close"););
},
"open": function(e) {
    $("#new_task_status").attr("value", "1");
    $("#new_task").slideDown();
},
"close": function(e) {
    $("#new_task_status").attr("value", "0");
    $("#new_task").slideUp();
}               
});

$("#nav").click(function() {
    $("#add_task").trigger("toggle");
});