Take the 2-minute tour ×

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?

share|improve this question
add comment

5 Answers

up vote 13 down vote accepted

JQuery has two toggle() methods:


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(); });
share|improve this answer
The even/odd syntax is removed in jQuery 1.9. jquery.com/upgrade-guide/1.9 –  Steve Campbell Jan 18 '13 at 18:33
add comment

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
share|improve this answer
add comment

Here's what I used:

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

    var div_form = $('#listing_position_input');
        if (div_form.hasClass('hide')) {
        } else {
share|improve this answer
This was the only thing that worked for me reliably. –  TomA Nov 22 '09 at 18:46
if you just want to be toggling that one class, there's a .toggleClass() method –  nate.radebaugh Apr 9 '12 at 7:59
add comment

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 {

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

share|improve this answer
add comment

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

  if ( $("#mydiv").css("display") == "none" ){
       } else {
share|improve this answer
add comment

Your Answer


