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?

Here is tutorial on How to create JQuery plugin to convert radio buttons into toggle buttons and Here you can see demo — Gopal Joshi
– Gopal Joshi, Commented Feb 13, 2017 at 5:17

Ramiz Wachtler · Accepted Answer · 2015-09-03 09:37:42Z

36

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

edited Sep 3, 2015 at 9:37

Ramiz Wachtler

5,6932 gold badges30 silver badges33 bronze badges

answered Dec 16, 2011 at 21:08

Nicky Vandevoorde

4614 silver badges6 bronze badges

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

Comments

Ivar · Accepted Answer · 2018-01-29 16:23:07Z

21

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();
});

edited Jan 29, 2018 at 16:23

Ivar

6,98912 gold badges58 silver badges69 bronze badges

answered Oct 28, 2008 at 19:15

foxy

2,16815 silver badges12 bronze badges

1 Comment

Steve Campbell Over a year ago

The even/odd syntax is removed in jQuery 1.9. jquery.com/upgrade-guide/1.9

Michal Zuber · Accepted Answer · 2009-11-17 17:32:13Z

5

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');
        }
    });  
});

answered Nov 17, 2009 at 17:32

Michal Zuber

511 silver badge1 bronze badge

1 Comment

Nate Radebaugh Over a year ago

if you just want to be toggling that one class, there's a .toggleClass() method

neezer · Accepted Answer · 2008-10-28 19:51:21Z

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();!

xiatica · Accepted Answer · 2011-02-07 04:28:27Z

2

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();
}

answered Feb 7, 2011 at 4:28

xiatica

1,5764 gold badges20 silver badges24 bronze badges

Comments

Vishal Patel · Accepted Answer · 2014-11-19 10:19:46Z

-1

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

Replace hidden with visible

answered Nov 19, 2014 at 10:19

Vishal Patel

6356 silver badges12 bronze badges

2 Comments

CodeMonkey Over a year ago

all you did was copy another answer and you didn't even copy correctly.

Mi-La Over a year ago

@CodeMonkey However it still provides some additional information, I didn't know that one can use ":visible" :-)

Collectives™ on Stack Overflow

jQuery Toggle State

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related