@NoBugs: You're wrong. The toggle() method that shows/hides an element (the one being used here) is NOT deprecated. The other toggle(handler, handler) method has been deprecated.
–
L SJun 2 '13 at 1:04

This solution would seem to encourage the confustion of visible=false and display:none; whereas Mote's solution clearly illistrates the coders intent to check the display:none; (via mention of hide and show which control display:none not visible=true)
–
kralco626Dec 29 '10 at 18:30

32

That is correct, but :visible will also check if the parent elements are visible, as chiborg pointed out.
–
Tsvetomir TsonevJan 6 '11 at 12:30

21

You have a point - I'll make it clear that the code checks only for the display property. Given that the the original question is for show() and hide(), and they set display, my answer is correct. By the way it does work with IE7, here's a test snippet - jsfiddle.net/MWZss ;
–
Tsvetomir TsonevJan 14 '11 at 16:54

19

I actually found that the reverse logic words better: !$('selector').is(':hidden'); for some reason. Worth a try.
–
KzqaiJan 5 '12 at 15:36

2

I never actually knew that there was such a :visible selector! I thought it was only :hidden.
–
think123Apr 21 '12 at 23:41

On pages 21 to 28 it shows how slow :hidden or :visible is compared to other selectors. Thanks for pointing this.
–
Etienne DupuisJul 4 '12 at 20:12

28

When you're dealing with a couple of elements and very little is going on - i.e. THE ABSURDLY VAST MAJORITY OF CASES - the time issue is a ridiculously minor concern. Oh, noes! It took 42 ms instead of 19 ms!!!
–
vbullingerFeb 20 '13 at 14:56

2

Although :hidden is slower than #id, this lead me to suspect :hidden checks the tag and all parents to see if they're hidden; actually it shortcuts by checking offsetHeight on just the one tag, which will be 0 if hidden. So not nearly as bad performance-wise as you might guess.
–
Chris MoschiniMar 27 '13 at 23:05

I am toggling the element mamually using this selector. $('element:hidden') is always true for me!
–
ZoomInAug 9 '13 at 7:18

I can't get this to work properly, but I'll bow out of this one.
–
WillOct 7 '08 at 13:13

54

This only checks for the display property of a single element. The :visible attribute checks also the visibility of the parent elements.
–
chiborgMar 3 '10 at 10:10

44

@gnomixa No it should not. Consider if the element's parent has display:none; -- then the element is hidden, but this answer would falsely report that it is visible. Whereas the :visible and :hidden pseudo-classes correctly report that it is hidden.
–
RicketFeb 24 '11 at 16:52

3

This is the only solution that worked for me when testing with IE 8.
–
evanmcdJan 13 '12 at 18:51

2

@chiborg Yes, but sometimes that's what you want and I had to learn the hard way how "clever" jQuery was...
–
emodendroketMar 14 '14 at 17:56

None of these answers address what I understand to be the question, which is what I was searching for, "how do I handle items that have visibility: hidden?". Neither :visible nor :hidden will handle this, as they are both looking for display per the documentation. As far as I could determine, there is no selector to handle CSS visibility. Here is how I resolved it (standard jQuery selectors, there may be a more condensed syntax):

This was the answer I was looking for when I came across this question via google.
–
BobNov 7 '11 at 22:47

8

+1 for a useful answer to a different question about css visibility. The question was for jquery's show/hide functions, which use css display (which isn't apparent by just looking at the function names; I got it from other answers). It's also confusing that the answer to jquery's show/hide (display) is a jquery selector named "visible", which does not handle css "visible".
–
goodeyeDec 20 '12 at 3:19

5

This answer is good to handle visibility literally, but the question was How you would test if an element has been hidden or shown using jQuery?. Using jQuery means: the display property.
–
MDeSchaepmeesterMay 11 '13 at 22:37

Often when checking if something is visible or not, you are going to go right ahead immediately and do something else with it. jQuery chaining makes this easy.

So if you have a selector and you want to perform some action on it only if is visible or hidden, you can use filter(":visible") or filter(":hidden") followed by chaining it with the action you want to take.

No reason to extract the DOM node in the snippet used in the example, and then have to look it back up again. Better to just do: var $button = $('#btnUpdate'); And then in the If expressions just use $button instead of $(button). Has the advantage of caching the jQuery object.
–
LocalPCGuyApr 21 '12 at 22:32

An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

This is useful in some cases and useless in others, because if you want to check if the element is visible (display != none), ignoring the parents visibility, you will find that doing .css("display") == 'none' is not only faster, but will also return the visibility check correctly.

If you want to check visibility instead of display, you should use: .css("visibility") == "hidden".

Also take into consideration the additional jQuery notes:

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

Another difference between visibility:hidden and opacity:0 is that the element will still respond to events (like clicks) with opacity:0. I learned that trick making a custom button for file uploads.
–
Perro AzulJun 29 '12 at 18:15

.hasClass('hide') doesn't check if an ancestor of the parent is hidden (which would make it hidden too). You could possibly get this to work correctly by checking if .closest('.hide').length > 0, but why reinvent the wheel?
–
nbrooksSep 25 '12 at 23:57

Variant you propose returns if element visible on html, my variant returns if element was directly hidden by your javascript code/view engine. If your know that parent elements should never be hidden - use .hasClass() to be more strict and prevent future bugs. If you want to check not only visibility but element state set too - use .hasClass() too. In other cases .closest() is better.
–
Evgeny LevinDec 1 '12 at 20:27

Another answer you should put into consideration is if you are hiding an element, you should use jQuery, but instead of actually hiding it, you remove the whole element, but you copy its HTML content and the tag itself into a jQuery variable, and then all you need to do is test if there is such a tag on the screen, using the normal if (!$('#thetagname').length).

You can't rely on implicit truthiness here; all JS objects (excepting null) are truthy, even empty ones such as { }. if ($('#thetagname')) will always pass, because $ returns a jQuery object, which the JS engine interprets as true. The shortest way to express that idea would be if ( !$('#thetagname').length ), but this is obviously not very clear...
–
nbrooksSep 25 '12 at 23:41

Use class toggling, not style editing . . .

Using classes designated for "hiding" elements is easy and also one of the most efficient methods. Toggling a class 'hidden' with a Display style of 'none' will perform faster than editing that style directly. I explained some of this pretty thoroughly in Stack Overflow question Turning two elements visible/hidden in the same div.

c) Check if the center (also because it is faster than testing every pixel / corner) of element is not hidden by other element (and all ancestors, example: overflow:hidden / scroll / one element over enother) or screen edges

Because Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (as described for jQuery :visible Selector) - we can check if element is really visible in this way: