I've two divs: the div "#Stage" is display="block" and from time to time "display:none". Depending on this I'll appear my second div "#case", default is display="none".

So I tried these two ways:

if ($('#Stage').css('display') == 'none') {
    $('#case').css('display','block')
} // added display:none; to my css file at #case

if ($('#Stage').css('display') == 'none'){
    $('#case').show()
} else if ($('#Stage').css('display') != 'none'){
    $('#case').hide()
}

But both of these methods doesn't work, means the #case div is always on display:none. Does anyone know how to solve it?

THanks

I've two divs: the div "#Stage" is display="block" and from time to time "display:none". Depending on this I'll appear my second div "#case", default is display="none".

So I tried these two ways:

if ($('#Stage').css('display') == 'none') {
    $('#case').css('display','block')
} // added display:none; to my css file at #case

if ($('#Stage').css('display') == 'none'){
    $('#case').show()
} else if ($('#Stage').css('display') != 'none'){
    $('#case').hide()
}

But both of these methods doesn't work, means the #case div is always on display:none. Does anyone know how to solve it?

THanks

• javascript
• jquery
• css

• 1 Can you please add html to the question? – Adil Commented Feb 11, 2013 at 9:40

3 Answers 3

I would use :visible to check if the element is shown or not and use show() and hide() method.

if ($('#Stage').is(':visible'))    
    $('#case').show();    
else
    $('#case').hide();

or

if ($('#Stage:visible').length)    
    $('#case').show();    
else
    $('#case').hide();

It could possibly because you're using display:none in the CSS file, and it's taking precedence. Try doing it inline on #case and seeing if that works.

Thanks for your help. My two solutions and the first from Adil was working. It was an ordering conflict with Adobe Edge - edgeActions.js.