Geek asks and answers

Show div with parent display: none

Possible duplicate:
Show HTML child when displaying parent: none

I have a div inside another div. I set the outer div to display:none, and this will cause the inner div to also be hidden. How can I show the inner div and set the outer so that it doesn't display?

CSS

.hidden {
    width:100px;
    height:100px;
    background-color:red;
    display:none;
}

.display {
    width:50px;
    height:50px;
    background-color: yellow;
    display:block;
}

HTML:

<div class="hidden">
    <div class="display"></div>
</div>

Example: http://jsfiddle.net/gcyhz/1/

+5
source share
5 answers

The simplest alternative to this would be to avoid using display: noneand use color transparent:

.hidden {
    width:100px;
    height:100px;
    color: transparent;
    background-color: transparent;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    display:block;
}

JS Fiddle demo .

It is also possible to use visibilityinstead of display: none:

.hidden {
    width:100px;
    height:100px;
    visibility: hidden;
}

.display {
    width:50px;
    height:50px;
    color: #000;
    background-color: yellow;
    visibility: visible;
}

JS Fiddle demo .

, , visibility: hidden DOM, - ( - , ), , visibility: visible.

, , , , , , transparent color ( , , , , , IE, - , ).

, display: none , , , opacity.

, , , , .

+7

, . . (, div div, ?)

+2

( A) display:none;, ( ) , , A . visibility:hidden;. display:none; .

, .

+1

Setting up display: nonean element makes it look as if it did not exist in the DOM (it does not have visual space). Unable to create element inside another element with display: none.

0
source

Jquery seems to .unwrap()do the trick:

$(".display").unwrap();

(Although I have a lot of data and in my case it is best to do this on the server side)

0
source

More articles:


All Articles