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?

Answer 1

Check if it's visible.

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

Check if it's hidden.

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

Answer 2

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.