55

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?

Jason
  • 10,825
  • 23
  • 72
  • 128
  • 6
    http://stackoverflow.com/questions/178325/how-do-you-test-if-something-is-hidden-in-jquery – Adam Jul 19 '10 at 16:19

4 Answers4

108

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

meder omuraliev
  • 171,706
  • 64
  • 370
  • 423
  • 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
23

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

Shafiqul Islam
  • 5,065
  • 1
  • 26
  • 39
4

You can try this:

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

Example;

if ($('#element_id').is(":visible") ) {
    // do something
}
Ali Aboussebaba
  • 952
  • 10
  • 12
2

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

litelite
  • 2,719
  • 4
  • 20
  • 32
Abhijit
  • 192
  • 7