Check div is hidden using jQuery

Question

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?

Answer 1

You can check the CSS display property:

if ($('#car').css('display') == 'none') {     alert('Car 2 is hidden'); } 

Here is a demo: http://jsfiddle.net/YjP4K/