[jquery] Check div is hidden using jquery

This is my div

<div id="car2" style="display:none;"></div>

Then I have a Show button that will show the div when you click:

$("show").click(function() {
    $("$car2").show();
}); 

So right now I want to check if the div #car2 is still hidden before form submission:

if($('#car2').is(':hidden')) {
    alert('car 2 is hidden');
}

Now here is the problem. Although the div #car2 already show, I still got alert message which means that jQuery assumes the div #car2 is still hidden.

My jQuery version is 1.7.

Thanks.

EDIT:

As jasper said, my code is correct and can be run via this demo.

What i suspect there is some conflict with jquery form to wizard plugin that i am using with my form. Anyone have any idea to solve this?

This question is related to jquery hidden visible

The answer is


Did you notice your typo, $car2 instead of #car2 ?

Anyway, :hidden seems to be working as expected, try it here.


Try checking for the :visible property instead.

if($('#car2').not(':visible'))
{
    alert('car 2 is hidden');       
}

Try:

if(!$('#car2').is(':visible'))
{  
    alert('car 2 is hidden');       
}

Try

if($('#car2').is(':hidden'))
{  
    alert('car 2 is hidden');       
}

You can use,

if (!$("#car-2").is(':visible'))
{
      alert('car 2 is hidden');
}