Testing if something is hidden with jQuery
17
In jQuery, it is possible to toggle the visibility of an element. You can use the functions .hide(), .show() or .toggle().

But how would you test if an element has been hidden or shown using jQuery?
improve this question | comment
Titus Fadel Created at: 2013-11-13 17:07:49 UTC By Titus Fadel
Thanks, I just learned about the toggle function.  That's extremely helpful. - Kristofer Miller IV
I think this question should be protected. It is very useful! - Keira O'Keefe
@Rich - One more...fadeToggle() - Laila Lockman
@Rich - one more slideToggle() - Gaetano Steuber
@NoBugs No, only an alternate signature of .toggle() was deprecated. toggle([duration] [, complete]) (or with no arguments) is still perfectly valid. - Ryan Dare
21 Answers
0
Example:

<div id="checkme" class="product" style="display:none">
 <span class="itemlist"><!-- Shows Results for Fish --></span>
 Category:Fish
 <br>Product: Salmon Atlantic
 <br>Specie: Salmo salar
 <br>Form: Steaks
</div>


<script>
  $(document).ready(function(){
     if($("#checkme:hidden").length)
     {
          alert('Hidden');
     }
   });
</script>

0
How element visibility and jQuery works;

An element could be hidden with "display:none", "visibility:hidden" or "opacity:0". The difference between those methods:

display:none hides the element, and it does not take up any space;
visibility:hidden hides the element, but it still takes up space in the layout;
opacity:0 hides the element as "visibility:hidden", and it still takes up space in the layout; the only difference is that opacity lets one to make an element partly transparent;  

        if ($('.target').is(':hidden')) {
            $('.target').show();
        } 
        else {
            $('.target').hide();
        }
        if ($('.target').is(':visible')) {
            $('.target').hide();
        } 
        else {
            $('.target').show();
        }

        if ($('.target-visibility').css('visibility') == 'hidden') {
            $('.target-visibility').css({ visibility: "visible", display: "" });
        }
         else {
            $('.target-visibility').css({ visibility: "hidden", display: "" });
        }

        if ($('.target-visibility').css('opacity') == "0") {
            $('.target-visibility').css({ opacity: "1", display: "" });
        } 
        else {
            $('.target-visibility').css({ opacity: "0", display: "" });
        }

Useful jQuery toggle methods:

$('.click').click(function() {
    $('.target').toggle();
});

$('.click').click(function() {
    $('.target').slideToggle();
});

$('.click').click(function() {
    $('.target').fadeToggle();
});


http://web-profile.com.ua/jquery/dev/jquery-element-visible-hidden/
0
If you already have a reference to a particular element and you want to perform some action on it only if it is visible, or only if it is hidden then you can do do the following. This basically allows you to do the following, but without the 'if' statement : 

if ($(button).is(":visible")) {
     $(button).animate({ width: "toggle" });   // hide button
 }


Here's how to do it without the 'if' :

var button = $('#btnUpdate')[0];

if (weWantToHideTheButton) 
    {
        // hide button by sliding to left
        $(button).filter(":visible").animate({ width: "toggle" });
    }
    else {
        // show button by sliding to right
        $(button).filter(":hidden").animate({ width: "toggle" });
    }


This uses the same :visible or :hidden check, but acts on a specific element we already have previously selected (the variable button).

In this case I wanted to do this, but in only one line.
0
It's worth mentioning (even after all this time), that $(element).is(":visible") works for jQuery 1.4.4, but not for jQuery 1.3.2, under Internet Explorer 8.

This can be tested using Tsvetomir Tsonev's helpful test snippet. Just remember to change the version of jQuery, to test under each one.
0
As, the question refers to a single element, this code might be more suitable:

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]


Same as twernt's suggestion, but applied to a single element.
0
You can use the hidden selector.

// Matches all elements that are hidden
$('element:hidden')


And the visible selector

// Matches all elements that are visible.
$('element:visible')

0
$(element).css('display') == 'none'


Functions don't work with the visibility attribute.
0
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):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

0
From How do I determine the state of a toggled element? :

You can determine whether an element is collapsed or not by using the :visible and :hidden selectors.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');


If you're simply acting on an element based on its visibility, just include ":visible" or ":hidden" in the selector expression. For example:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

0
The :visible selector according to the jQuery documentation:

They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
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").


Also, if you are concerned about performance, you should check Now you see me… show/hide performance (2010-05-04). And use other methods to show and hide elements.
0
Also here's a ternary conditional expression to check the state of the element and then to toggle it:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

0
This works for me, and I am using show() and hide() to make my div hidden/visible

if( $(this).css("display") == 'none' ){

    /* your code here*/
}
else{

    /*  alternate logic   */
}

0
I use CSS class .hide { display: none!important; }. 

For hiding/showing, I call .addClass("hide")/.removeClass("hide"). For checking visibility, I use .hasClass("hide").

It's a simple and clear way to check/hide/show elements, if you don't plan to use .toggle() or .animate() methods.
0
You can also do this using straight JavaScript:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}


Notes:

Works everywhere
Works for nested elements
Works for CSS and inline styles
Doesn't require a framework
0
ebdiv should be set to style="display:none;". It is works for show and hide:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

0
One can simply use the hidden or visible attribute, like:

$('element:hidden')
$('element:visible')


Or you can simplify the same with is as follows.

$(element).is(":visible")

0
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).
0
This may work:

expect($("#message_div").css("display")).toBe("none");

0
HTML

<div id="clickme">
 Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />


jQuery

<script>

$('#clickme').click(function() {
$('#book').toggle('slow', function() {
    // Animation complete.
     alert( $('#book').is(":visible"));//<--- TRUE if Visible False if Hidden
   });
});

</script>


Source: http://bloggerplugnplay.blogspot.in/2013/01/how-to-see-if-element-is-hidden-or.html

jsFiddle: http://jsfiddle.net/ipsjolly/k4WWj/
0
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.

JavaScript Best Practices and Optimization

Here is a truly enlightening video is the Google Tech Talk by Google front-end engineer Nicholas Zakas:

Speed Up Your Javascript (YouTube)
0
To check if it is not visible I use !:

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}


Or the following is also the sam, saving the jQuery selector in a variable to have better performance when you need it multiple times:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}

Your Answer