Display HTML child element when parent element is display:none

Question

Is there any mechanism to display a child element when its parent element is display: none?

The situation is a validation error on a hidden tab. I want to surface the error message, even though the field is hidden.

A really simplified JSFiddle of the situation is here http://jsfiddle.net/vLYnk/

Markup:

<ul>
    <li>One</li>
    <li class="hide">
        Two
        <ul>
            <li class="reshow">Re Show Me</li>
            <li>Inner 2</li>
        </ul>
    </li>
    <li>Three</li>
</ul>

CSS:

.hide {display: none}
.reshow {display: block !important; position: fixed; top: 0; left: 0;}

I'm guessing this is impossible as the child would have no context, but just in case???

KP. · Accepted Answer · 2012-10-18T14:42:19.450

67

No this isn't possible. display:none hides the element, and thus any child elements will not be displayed.

EDIT:

This might be along the lines of what you want, if you're able to switch from using display to visibility.

.hide {visibility: hidden;}
.reshow {visibility: visible;}

Using this method you can hide the contents of the parent element but show the specific <li> you want. The only caveat is the parent markup will still take up screen real estate. Just won't be shown to the user. That may or may not break the layout you're looking for.

http://jsfiddle.net/vLYnk/2/

edited Oct 18 '12 at 14:42

answered Oct 18 '12 at 14:27

KP.

13,218
3
40
60

1

@Andiih Ok - I've updated the answer with an alternate solution using `visibility` rather than `display` CSS attribute. – KP. Oct 18 '12 at 14:42

score 5 · Answer 2 · answered Oct 18 '12 at 14:28

5

No, this is not possible. You could instead move the child element out of its hidden parent and insert it somewhere else in the markup (e.g. via JavaScript).

answered Oct 18 '12 at 14:28

feeela

29,399
7
59
71

2

that was what I thought...was just hoping I didn't have to go that route. – Andiih Oct 18 '12 at 14:31

Maciej · Answer 3 · 2014-04-07T16:15:04.010

4

For specific situations you can use this either:

.hidden-container *{display:none;}
.hidden-container .show-again{display:block}

That will keep .hidden-container displayed, but everything except .show-again container will have display property set to none.

jsFiddle

EDIT:

note, that it'll reset all display properties in childs of .hidden-container if declared after their styles.

edited Apr 07 '14 at 16:15

answered Apr 07 '14 at 16:05

Maciej

126
6

4

Sorry, this answer is misleading because it only works if you have no nesting for child elements. It works only for hiding siblings of the element, otherwise it doesn't work: http://jsfiddle.net/jyKSu/1/ – AaronLS Nov 17 '14 at 21:39
Though I like this answer, I've heard using * in CSS can really slow down a mobile browser. I wonder the effects of using it as dependent? – Jason Feb 21 '17 at 17:03
* is not too slow if you have an exact parent element. – PRMan Sep 26 '22 at 22:30

score 4 · Answer 4 · answered Sep 09 '19 at 19:23

4

Just add .hide:

font-size: 0;
margin: 0;
padding: 0;

It will not occupy the space just as display none

answered Sep 09 '19 at 19:23

Максим Грабов

326
2
7

This works great, but only if the element to be hidden is text. – scott8035 Feb 20 '21 at 18:29

score 3 · Answer 5 · answered Oct 18 '12 at 14:38

You could instead of using display: none; to hide your element move it out of the viewport via position: relative/absolute; and left: -9999em; Than give the visible child a position: relative; and left: 9999em;

The downfall of this solution is, that the "reshown" element is out of the element flow if you used position: absolute. (Not occupying the space it needs and not pushing down following elements) Or that you occupy more space than is actually needed, when using position: relative.

http://jsfiddle.net/vLYnk/3/

score 1 · Answer 6 · answered Oct 18 '12 at 14:32

1

$('body').append($('.reshow').clone(true));

answered Oct 18 '12 at 14:32

Louis Ricci

20,804
5
48
62

The validation message is generated client side, so I'd need to hook into some event to fire this...already thinking down these lines. – Andiih Oct 18 '12 at 14:33

Display HTML child element when parent element is display:none

6 Answers6

Linked

Related