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...
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().
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.
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.
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.
you can use $(div).is(':visible')
$('.elem').slideToggle('fast', function() {
alert($(this).is(':visible'));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With