jQuery Toggle State

Question

Here's the quick and skinny of my issue:

$("a").toggle(function() { /*function A*/ }, function() { /*function B*/ });

Inside function A a form is displayed. If the user successfully completes the form, the form is hidden again (returning to it's original state).

Inside function B the same form is hidden.

The theory behind this is that the user can choose to display the form and fill it out, or they can click again and have the form go back into hiding.

Now my question is this: currently, if the user fills out the form successfully--and it goes into hiding--the user would have to click on the link twice before returning to the toggle state that displays the form.

Is there anyway to programmatically reset the toggle switch to its initial state?

Answer 1

jQuery has two .toggle() methods:

.toggle()

Toggles each of the set of matched elements. If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.

.toggle(even, odd)

Toggle between two function calls every other click.

In this case you want the first one. Something like this should do the trick:

$("a").click(function() {
    $("#theForm").toggle();
});

Answer 2

You can check the state of the toggle in jQuery by using .is(":hidden"). So in basic code what I used:

$("#div_clicked").click(function() {
  if ($("#toggle_div").is(":hidden")) {
     // do this
  } else {
     // do that
}
}); # add missing closing

Answer 3

Here's what I used:

$(document).ready(function() {
    $('#listing_position').click(function() {

    var div_form = $('#listing_position_input');
        if (div_form.hasClass('hide')) {
           div_form.removeClass('hide');
        } else {
          div_form.addClass('hide');
        }
    });  
});

Answer 4

Ahh, it's the simple things in life...

I was using the latter definition of toggle(even,odd);, but I had forgot to include in my original description of the problem that my second toggle function was not only hiding the form, but destroying it as well.

function A: Ajax load the form into an appended div. Hide and destroy the div on a successful form post.

function B: Destroy the div.

You both reminded me that toggle(); only deals with the CSS property, and as such it is not well-suited to this task. But then I realized that I was unnecessarily re-loading the form on each "odd" state by destroying it when I was done, so I eventually came back to this:

$("link").click(function() {
    if ($(this).siblings(".form-div").length == 0) {
        // form is not loaded; load and show the form; hide when done
    }
    else {
        $(this).siblings(".form-div").toggle();
    }
});

...which does what I want it to do. Thanks for setting me straight about toggle();!

Answer 5

Went with this one to avoid the additional hide/show class. I think this is more flexible than foxy's solution as you can add more functions within but don't quote me on that i'm a noob

$("#clickie").click(function(){
  if ( $("#mydiv").css("display") == "none" ){
     $("#mydiv").show();
       } else {
        $("#mydiv").hide();
}

Answer 6

$("#div_clicked").click(function() {
  if ($("#toggle_div").is(":visible")) {
     // do this
  } else {
     // do that
}

Replace hidden with visible