Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to determine the current state of jQuery toggle()

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...

like image 635
marky Avatar asked Feb 25 '13 11:02

marky


People also ask

What is toggle () in jQuery?

The toggle() method attaches two or more functions to toggle between for the click event for the selected elements. When clicking on an element, the first specified function fires, when clicking again, the second function fires, and so on. Note: There is also a jQuery Effects method called toggle().

How do you know if toggle is open?

Simple jQuery code snippets to check if toggle is open or closed. Basically, the current state can be determined by using this test: $(this).is(":hidden"). To see this in action, check out the jQuery.

Which is a valid jQuery syntax to show current element?

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Examples: $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements.

How does toggle function work?

toggle() function (removed in v1. 9) works by binding a click handler to the specified element(s), storing a list of all of the functions that you pass as parameters, and remembering which function in the list should be executed next.


2 Answers

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

like image 156
jvnill Avatar answered Oct 31 '22 19:10

jvnill


$('.elem').slideToggle('fast', function() {
    alert($(this).is(':visible'));
});
like image 22
Pedro Miguel Avatar answered Oct 31 '22 18:10

Pedro Miguel