How to check if a div is visible state or not?

Question

I have tabs like this.

<li id="singlechatpanel-1" style="visibility: hidden;">
     //content
</li>

Trying to check it like this:

$(".subpanel a").click(function() 
     {
        var chatterNickname = $(this).text();

        if(!$("#singlechatpanel-1").is(':visible'))
        {
            alert("Room 1 is filled.");
            $("#singlechatpanel-1").css({'visibility':'visible'});
            $("#singlechatpanel-1 #chatter_nickname").html("Chatting with: " + chatterNickname);
        }

If condition always returns false. How can I check visibility state of this div?

http://stackoverflow.com/questions/178325/testing-if-something-is-hidden-with-jquery — Johnny Mopp, Sep 10 '12 at 14:28

score 56 · Answer 1 · edited Oct 27 '14 at 17:25

56

Check if it's visible.

$("#singlechatpanel-1").is(':visible');

Check if it's hidden.

$("#singlechatpanel-1").is(':hidden');

edited Oct 27 '14 at 17:25

Joshua Pinter

41,803
23
230
232

answered May 29 '14 at 11:14

Vipin Kumar R. Jaiswar

721
5
6

Ram · Accepted Answer · 2013-04-02T05:31:19.397

51

is(':visible') checks the display property of an element, you can use css method.

if (!$("#singlechatpanel-1").css('visibility') === 'hidden') {
   // ...
}

If you set the display property of the element to none then your if statement returns true.

edited Apr 02 '13 at 05:31

answered Sep 10 '12 at 14:30

Ram

140,563
16
160
190

One question on why we can't just use $('..').css('display') and check for none? CSS newbie here, so not sure :S – bitanath Jun 05 '17 at 10:24
@bitanath Please check this related question: https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – Ram Jun 06 '17 at 00:12

score 17 · Answer 3 · edited Mar 11 '15 at 09:59

17

if element is hide by jquery then use

if($("#elmentid").is(':hidden'))

edited Mar 11 '15 at 09:59

NorthCat

8,997
16
45
49

answered Mar 11 '15 at 09:37

Shah Nawaz

396
2
9

score 8 · Answer 4 · edited Nov 15 '18 at 05:13

8

You can use .css() to get the value of "visibility":

 if( ! ( $("#singlechatpanel-1").css('visibility') === "hidden")){
 }

http://api.jquery.com/css/

edited Nov 15 '18 at 05:13

Ajay2707

5,624
6
38
56

answered Sep 10 '12 at 14:29

Pablo Martinez

2,153
1
23
27

score 3 · Answer 5 · answered Sep 10 '12 at 15:20

You can use (':hidden') method to find if your div is visible or not.. Also its a good practice to cache a element if you are using it multiple times in your code..

$(".subpanel a").click(function() 
     {
        var chatterNickname = $(this).text();
        var $chatPanel = $("#singlechatpanel-1");

        if(!$chatPanel.is(':hidden'))
        {
            alert("Room 1 is filled.");
            $chatPanel.show();
            $("#singlechatpanel-1 #chatter_nickname").html("Chatting with: " + chatterNickname);
        }
});

score 3 · Answer 6 · answered Sep 01 '15 at 09:55

3

if (!$('#singlechatpanel-1').css('display') == 'none') {
   alert('visible');
}else{
   alert('hidden');
}

answered Sep 01 '15 at 09:55

Prabhagaran

3,370
1
18
18

score 1 · Answer 7 · answered Sep 10 '12 at 14:33

Add your li to a class, and do $(".myclass").hide(); at the start to hide it instead of the visibility style attribute.

As far as I know, jquery uses the display style attribute to show/hide elements instead of visibility (may be wrong on that one, in either case the above is worth trying)

Khabir · Answer 8 · 2021-03-30T16:41:52.450

1

You can do it by any of these two ways:

$("#elementId").css('visibility')
and
$("#elementId").is(':visible');

if your element is visible then

$("#elementId").css('visibility') will return "visible"
and
$("#elementId").is(':visible') will return true

but if your element is NOT visible then

$("#elementId").css('visibility') will return undefined
and
$("#elementId").is(':visible') will return false

edited Mar 30 '21 at 16:41

answered Mar 30 '21 at 16:33

Khabir

4,511
1
14
28

How to check if a div is visible state or not?

8 Answers8

Check if it's visible.

Check if it's hidden.

Linked