JQuery Check to See if Div is Shown [duplicate]

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?

Solution 1:

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

Solution 2:

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')) {}

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')){}

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

hope it will help you

Solution 3:

You can try this:

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

Example;

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

Solution 4:

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