Pfthb

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?

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.

Check if it's visible.

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

Check if it's hidden.

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

if element is hide by jquery then use

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

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

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

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

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);
 
);

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

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)