StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The problem isn't with detecting if it's visible, it's with your selectors.</p> <p>Give your HTML structure, this line of jQuery:</p> <pre><code>if ( jQuery(this).parent("div") </code></pre> <p>Is not finding anything. The button is not inside a div, and it certainly isn't inside a div that then contains the ".mi_data_inst" element.</p> <p>I personally tend to avoid <a href="http://api.jquery.com/parent/" rel="nofollow">.parent()</a>, as it only traverses one level, and if your HTML structure changes at all, this gets broken. I recommend <a href="http://api.jquery.com/closest/" rel="nofollow">.closest()</a> instead, because it will travel as far as necessary to find the first relevant selector.</p> <p>However, given that you don't have a div wrapped around the element, and it seems this is unique, I'm going to suggest changing your selectors completely, as follows:</p> <pre><code>jQuery(document).on("click",".bip_btn", function(e) { // Utilize closest // Put into a variable, since you're using it more than once var parent = jQuery(this).closest(".wpb_column"); if (parent.find(".mi_data_inst").css('display') == 'none') { alert("ok--me"); // Utilize closest parent.find(".mi_data_inst").show(); } else { // Remove the .parent and .find() parent.(".mi_data_inst").hide(); } return false; }); </code></pre> <p><strong>Note:</strong><br> Your question specifically asks to check if the div in question is set to <code>display:none</code>, therefore I've left the structure above as such. However, if you want to simply check if the div is visible, the other answers here are correct, you could / should check with:</p> <pre><code>if ( ! jQuery(this).closest(".wpb_column").find('.mi_data_inst').is(':visible')) { // Show it } else { // Hide it } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload