How to determine the current state of jQuery toggle()

Question

I'm showing and hiding divs when another div is clicked on. I need to be able to determine if a particular div is either shown or hidden.

Ultimately what I'm trying to do is, when a certain div is clicked on, all other "show/hide" divs should be hidden and then determine if the clicked-div's related div is showing, if so hide it, otherwise show it.

I also need to add/remove a css class (for background color) to the shown/hidden div based on its toggle state.

Here's the jQuery code I'm using to toggle the show/hide state of the divs:

$('#movieListTable').on('click', 'div.vitalsTable', function (e) {

    // Don't do anything if the Edit button or Delete checkbox is clicked
    if (event.target.className !== 'btnEditMovie' && event.target.className !== 'chkDeleteMovie') {

        $(this).parent().parent().find('div.detailsTable').toggle('blind','easeInOutQuart', 300);
    }
});

The weird - and frustrating - thing is, everything I've read, including answers here at SO, indicate I should just be able to either check for the display state ("none") or the visible property, but checking in the console neither of those are being set on the div that is being shown/hidden.

I created a jsFiddle for you to mess with.

The jQuery documentation on toggle() discusses, about 3/4 of the way down the page, a boolean parameter "showOrHide" for one of the ways to use toggle(), but I haven't been able to figure out how to use that myself...

Possible duplicate of [jQuery Toggle State](http://stackoverflow.com/questions/244392/jquery-toggle-state) — Abhijeet, Jul 28 '16 at 07:47

score 25 · Accepted Answer · answered Feb 25 '13 at 11:54

25

you can use $(div).is(':visible')

answered Feb 25 '13 at 11:54

jvnill

29,479
4
83
86

1

Nope - tried it in my code with if $(div).is(':visible') { console.log('visible') } else { console.log('not visible') } and it always prints "not visible" in the console. – marky Feb 25 '13 at 11:58
did you replace `div` with the selector for the dom that you are checking? – jvnill Feb 25 '13 at 11:59
okay, but that's not working in my code - see my jsfiddle (link in my question). – marky Feb 25 '13 at 12:16
look at http://jsfiddle.net/wWaDm/4/ changed your toggle to just a simple toggle which works. There's something going on with the easing which I can't figure out. Good luck! – jvnill Feb 25 '13 at 12:37
Very interesting that removing the easing made the difference! I'd really like to keep that effect, so I'll look more into this, but thanks for the help! – marky Feb 25 '13 at 12:39
Using IE 11, jquery 3.1.1 and jquery ui 1.12.1, I find that if I pass any argument to the toggle() method (such as "fast"), then reading the properties is(':visible') and is(':hidden') is never accurate. In my case visible is always true and hidden is always false, even when the toggle state is hidden. When I do NOT pass an argument to toggle() everything works fine. – Tom Regan Aug 11 '17 at 13:03
that depends on when you actually check the visibility. If you look at Pedro's answer, the check happens after the toggle finishes. Make sure that you take that into account. – jvnill Aug 11 '17 at 16:21
just had the same issue when using $("#mydiv").toggle('fast') - checking if the div is visible or hidden immediately afterwards always shows 'true' - so what I did is check the state immediately before doing the toggle, then reversing it- ie var visible = !$("#mydiv").is(":visible"); $("#mydiv").toggle('fast'); – Myke Black Nov 30 '18 at 10:25

score 3 · Answer 2 · answered Sep 02 '15 at 15:56

3

$('.elem').slideToggle('fast', function() {
    alert($(this).is(':visible'));
});

answered Sep 02 '15 at 15:56

Pedro Miguel

41
2

score 0 · Answer 3 · edited May 23 '17 at 12:33

var className = $(el).attr("class");

Can retrieve current class from there on logic can take over test and modify the element:

if(className == "yourCss")
el.addClass("YourCSS");
el.removeClass("YourCSS");

I still believe jvnill's answer is efficient one, unless one has to test multiple class cases.

toggle(): Just toggle of between hide() and show() for the selected elements, by changing the CSS display property.

Note: As a class is added to the element, class attribute(list) of the element gets appended with it, unless removed by the .removeClass() invocation.

How to determine the current state of jQuery toggle()

3 Answers3

Linked