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?

jsfiddle.net/YjP4K/2 Your code does work when simplified so maybe you have an error somewhere else? — Jasper
– Jasper, Commented Dec 13, 2011 at 4:26

Jasper · Accepted Answer · 2011-12-13 04:21:02Z

70

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/

answered Dec 13, 2011 at 4:21

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cyberfly Over a year ago

although other answer is correct, but somehow i can only use this method in my form so i will choose this as an answer. thanks.

akshay Over a year ago

$('#car').is(:hidden) should work. This also is a cleaner solution than the current one. Check more at api.jquery.com/hidden-selector

Jasper Over a year ago

@akshay yeah that makes more semantic sense. I think there are edge cases where doing your own check makes sense because there are conditions around the element(s) that screw with the :hidden and :visible selectors.

Ankush Raghuvanshi Over a year ago

@akshay you forgot the quotes on :hidden. It should be $('#car').is(':hidden')

Omtara · Accepted Answer · 2011-12-13 04:22:27Z

31

Try:

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

answered Dec 13, 2011 at 4:22

Omtara

3,0212 gold badges21 silver badges33 bronze badges

Comments

Sadikhasan · Accepted Answer · 2015-02-20 08:01:29Z

11

Try

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

answered Feb 20, 2015 at 8:01

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

Comments

Phil.Wheeler · Accepted Answer · 2011-12-13 04:22:06Z

4

Try checking for the :visible property instead.

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

answered Dec 13, 2011 at 4:22

Phil.Wheeler

16.9k10 gold badges103 silver badges157 bronze badges

Comments

Jenz · Accepted Answer · 2014-05-13 10:43:54Z

2

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

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

edited May 13, 2014 at 10:43

Jenz

8,3718 gold badges50 silver badges83 bronze badges

answered Dec 13, 2011 at 4:41

smendola

2,3091 gold badge15 silver badges14 bronze badges

Comments

SharK · Accepted Answer · 2016-07-05 08:40:01Z

1

You can use,

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

answered Jul 5, 2016 at 8:40

SharK

2,2231 gold badge23 silver badges28 bronze badges

Collectives™ on Stack Overflow

Check div is hidden using jQuery

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related