JQuery Check to See if Div is Shown

Question

This is what I am ultimately trying to achieve:

//When the user clicks the liveshow button this happens
$(".liveshow-button").live('click', function() {
    if ($(".liveshowDiv2").css('display') == 'none') {
        $(".liveshowDiv2").fadeOut(ifadeOutSpeed, function() {
            $('#wrapper-div').animate({ 
                height: $('.liveshowDiv1').height() + "px" 
            }, 
            iresizeSpeed, function() {
                $('.liveshowDiv1').fadeIn(ifadeInSpeed, function());
            });
        });
    }
    else {
        alert('This never gets displayed');
        $(".liveshowDiv1").slideUp('fast');
    }
});

Basically I want to toggle between liveShowDiv1 being displayed and hidden when you click this button. But since other things on the page can make liveShowDiv1 hidden, I can't just make a toggle function to do this. I have to check somehow to see if liveShowDiv1 is being displayed or not.

When it not displayed: display = none

When it is showing display is not in the style tag at all

How can I tell in JQuery when this div is displayed?

http://stackoverflow.com/questions/178325/how-do-you-test-if-something-is-hidden-in-jquery — Adam, Jul 19 '10 at 16:19

score 112 · Accepted Answer · answered Jul 19 '10 at 16:19

112

if ( $(this).is(':visible') ) should work for this relatively simple show/hide.

answered Jul 19 '10 at 16:19

meder omuraliev

183,342
71
393
434

3

I swear I knew that at some point in time. Surprised I coudldn't figure it out on google. – Jason Jul 21 '10 at 17:03

Shafiqul Islam · Answer 2 · 2017-05-26T10:25:50.497

Sometime need to check that div is block or none. We can do this very easily . This is simple code . here id = "test" -> for testing purpose if you use class = "test" then need to update code For checking Block or visible then use this for your select test is id

1. if ($('#test').is(':visible')) {}

2. if ($('#test').css('display') == 'block'){}

3. if ($('#test').not(':hidden')){}

if your selector is class then

1. if ($('.test').is(':visible')) {}

or

1. if ($(your_element).is(':visible')) {}

same other

For checking none or hide then use this code if your selector is id

1. if ($('#test').not(':visible')){}

2. if (!$('#test').is(':visible')){}

3. if ($('#test').css('display') == 'none'){}

4. if ($('#test').is(':hidden')){}

if your selector is class then use this

1. if ($('.test').not(':visible')){}

or

1. if ($(your_element).not(':visible')){}

hope it will help you

score 6 · Answer 3 · answered Nov 28 '14 at 10:44

6

You can try this:

$(your_element).is(":visible")

Example;

if ($('#element_id').is(":visible") ) {
    // do something
}

answered Nov 28 '14 at 10:44

Ali Aboussebaba

1,082
13
12

score 3 · Answer 4 · edited May 26 '17 at 12:34

3

You can use $(element).is(":visible") to check if the element is visible

edited May 26 '17 at 12:34

litelite

2,857
4
23
33

answered May 26 '17 at 10:30

Abhijit

242
1
7

JQuery Check to See if Div is Shown

4 Answers4