Show div with parent display:none

Question

Possible Duplicate:
Display HTML child element when parent element is display:none

I have a div inside a another div. I have set the outer div to display:none this will make the inner div hide as well. How can I show the inner div and have the outer one set to display none?

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/

Either A) don't put inner div in the hidden div or B) move it out of the hidden div — Rory McCrossan, Jan 30 '13 at 16:22
You can't. You can't hide an element and expect it's content to be visible, you'll need to do what Rory says. — adeneo, Jan 30 '13 at 16:23
What are you trying to accomplish? Outer div hides the inner div by design — Explosion Pills, Jan 30 '13 at 16:23
Pretty sure you can't. Unless you move the inner div outside the hidden parent. — gen_Eric, Jan 30 '13 at 16:24
Too bad it can't be done, I was hoping for a jquery 'hack' on this — Youss, Jan 30 '13 at 16:24

David Thomas · Answer 1 · 2013-01-30T16:33:58.400

The simplest alternative to implement this, would be to avoid using display: none and use the transparent colour:

.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.

There's also the option of using visibility instead 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.

This does, however, cause the visibility: hidden element to take up its allocated space in the DOM, but leaving it apparently-vacant (so it still has physical dimensions, it's just not visible on the page), though the child element can override that property by declaring visibility: visible.

In all honesty the latter suggestion is, effectively, exactly the same as the first, it just avoids problems that some browsers might have with transparent as a color (I can't remember which browser had this problem, but I seem to recall it being an older IE, but I can't reference any document to corroborate that recollection).

Unfortunately the display: none declaration on a parent cannot be overridden on a child element, and, incidentally, neither can opacity.

The easiest solution, as noted, is to simply move the element out of its parent, and avoid the inheritance problem rather than trying to compensate for it.

opacity is not going to work for me..Do you think jquery remove parent will have a better chance? — Youss, Jan 30 '13 at 16:34
@Youss: I wasn't suggesting you should use `opacity`, I'm suggesting that you *could* use `transparent` as `color` and `background-color` in the `.hidden` element (and override in the `.display` element) or using `visibility`. Moving the element outside of its parent is, probably, the simpler solution. Though I'd do it server-side (permanently) if possible, rather than on the client *every time they load the page*. — David Thomas, Jan 30 '13 at 16:36

score 2 · Answer 2 · answered Jan 30 '13 at 16:22

2

Unfortunately, this is not possible. You'll have to design an alternate solution. (Perhaps move the inner div out of the hidden div when you need to display it?)

answered Jan 30 '13 at 16:22

Elliot Bonneville

49,322
23
92
122

Wel that's what I will be doing then, thanks – Youss Jan 30 '13 at 16:25
That's OK if it's your own page and you're in total control. If you are trying to manipulate a page already generated by a CMS you may not have that option. The visibility:hidden suggestion below is more to the point in this case. – Francis Jan 05 '15 at 14:54

score 1 · Answer 3 · answered Jan 30 '13 at 16:25

when you set the parent element (element A) to display:none; it will (in a very simple explanation) remove the element from the page so that other elements will act as if element A is not on the page. As opposed to visibility:hidden;. Setting it to display:none; will have to hide that element and it's children.

No way around that as far as I'm aware.

score 0 · Answer 4 · answered Jan 30 '13 at 16:25

0

Setting display: none to an element makes it appear as if it does not exist in the DOM (it takes no visual space). It isn't possible to make an element inside another element with display: none to actually appear.

answered Jan 30 '13 at 16:25

Konstantin Dinev

32,797
13
71
95

score 0 · Answer 5 · answered Jan 30 '13 at 17:09

0

The jquery .unwrap() seems to do the trick:

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

(Although I have much data and in my case its best to do this server-side)

answered Jan 30 '13 at 17:09

Youss

4,076
12
50
106

I can accept my own answer in two days... – Youss Jan 30 '13 at 17:10
Some more reference: http://stackoverflow.com/questions/6085879/how-do-i-unwrap-all-parents-using-jquery – Youss Jan 30 '13 at 17:16

Show div with parent display:none

5 Answers5