How to display a child element while hiding a parent

**Captain Paralytic** · Jun 27 '08, 07:13 PM

Re: How to display a child element while hiding a parent

On 4 Jun, 12:16, dwe...@gmail.co m wrote:

Hi,
>
I am trying to display the child element in the DOM, while hiding the
parent using JS and CSS, however I cannot find a way to do this.
>
So for example:
>
<body>
<div id="Parent">
<div id="child_1"></div>
<p id="child_2"></p>
</div>
</body>
>
I am trying to hide "Parent", and "child_1" and show "child_2". I
cannot change the possition in the actual mark up so i need script to
do this.
>
and so far hiding Parent using:
>
$("Parent").sty le.display="non e";
>
Hides all the child elements.
>
Do anyone know how I can do this? or an alternative method to achive
the same result?

Just hide all the child elements that you do not want?

**dweeti@gmail.com** · Jun 27 '08, 07:13 PM

Re: How to display a child element while hiding a parent

On 4 Jun, 15:54, Captain Paralytic <paul_laut...@y ahoo.comwrote:

On 4 Jun, 12:16, dwe...@gmail.co m wrote:
>
>
>
>
>

Hi,

>

I am trying to display thechildelement in the DOM, while hiding the
parentusing JS and CSS, however I cannot find a way to do this.

>

So for example:

>

>

I am trying to hide "Parent", and "child_1" and show "child_2". I
cannot change the possition in the actual mark up so i need script to
do this.

>

and so far hidingParentusi ng:

>

$("Parent").sty le.display="non e";

>

Hides all thechildelement s.

>

Do anyone know how I can do this? or an alternative method to achive
the same result?

>
Just hide all thechildelement s that you do not want?- Hide quoted text -
>
- Show quoted text -

Its not quite that simple, as this is a small example the one i'm
using has hundreds, also the parent does formatting which i want to
remove, so hiding parent would take care of all of this in one hit.
Hididng and changing styles for all would mean lines and lines of
code. Thanks

**Dan Rumney** · Jun 27 '08, 07:13 PM

Re: How to display a child element while hiding a parent

Its not quite that simple, as this is a small example the one i'm

using has hundreds, also the parent does formatting which i want to
remove, so hiding parent would take care of all of this in one hit.
Hididng and changing styles for all would mean lines and lines of
code. Thanks

You could create a sibling to the parent element and place it directly
after that parent element.

Then move the child you want to save to the new parent

Then make the old parent invisible

Might need some refinement, but the principle is there

**Thomas 'PointedEars' Lahn** · Jun 27 '08, 07:13 PM

Re: How to display a child element while hiding a parent

On 4 Jun., 13:16, dwe...@gmail.co m wrote:

<body>
<div id="Parent">
<div id="child_1"></div>
<p id="child_2"></p>
</div>
</body>
>
I am trying to hide "Parent", and "child_1" and show "child_2". I
cannot change the possition in the actual mark up so i need script to
do this.

Not necessarily, and not here. If scripting CSS can do this, plain
CSS can do it as well.

and so far hiding Parent using:
>
$("Parent").sty le.display="non e";
>
Hides all the child elements.

Works as designed. Setting the `display' property to `none' renders
the respective element as if it never existed, so not at all. If you
accomplished time-travel and rendered your parents non-existing before
the time you were conceived, you would not exist (at least that is the
known paradox).

Do anyone know how I can do this? or an alternative method to achive
the same result?

The equivalent of

$("Parent").sty le.visibility = "hidden";
$("child_2").st yle.visibility = "visible";

works in Firefox 2.0.0.14, IE 6.0.2900.2180.x psp_sp2_gdr.070 227-2254,
IE 7.0.5730.11, Opera 9.27.8841, and Safari 3.1.1 (525.17) on Windows
XP SP2. The CSS2 Specification, section 11.2, suggests that this is
compliant behavior:

Visual effects

http://www.w3.org/TR/REC-CSS2/visufx.html#propdef-visibility

You might have to do the equivalent of

$("Parent").sty le.overflow = "hidden";

to get rid of then-unnecessary scrollbars, too.

HTH

PointedEars

**dweeti@gmail.com** · Jun 27 '08, 07:14 PM

Re: How to display a child element while hiding a parent

On 4 Jun, 23:27, Dan Rumney <danrum...@7761 7270mail.netwro te:

Its not quite that simple, as this is a small example the one i'm
>

using has hundreds, also theparentdoes formatting which i want to
remove, sohidingparentw ould take care of all of this in one hit.
Hididng and changing styles for all would mean lines and lines of
code. Thanks

>
You could create a sibling to theparentelemen tand place it directly
after thatparenteleme nt.
>
Then move thechildyou want to save to the newparent
>
Then make the oldparentinvisi ble
>
Might need some refinement, but the principle is there

Thank you all for your help.

Dan, I've played around with scripting the concept you've mentioned,
it's quite abit of manipulation but its the best method I've seen so
far and it does exactly what I need.

Thanks again.

**SAM** · Jun 27 '08, 07:14 PM

Re: How to display a child element while hiding a parent

dweeti@gmail.co m a écrit :

>
Dan, I've played around with scripting the concept you've mentioned,
it's quite abit of manipulation

not so much

function $(id) { return document.getEle mentById(id); }
function childSchow(pare nt, child) {
child = $(child).cloneN ode(true);
child.className = '';
child.id += 'c';
var parent = $(parent);
parent.parentNo de.insertBefore (child, parent);
child.memory = parent.parentNo de.removeChild( parent);
}
function parentSchow(chi ld) {
child = $(child+'c');
var parent = child.memory
child.memory = null;
child.parentNod e.insertBefore( parent, child);
child.parentNod e.removeChild(c hild);
}

not tested with IE
--
sm

**xomby** · Dec 15 '11, 05:11 PM

[SOLUTION] How to display a child element while hiding a parent

The goal:
Need to hide a parent <div> (or any object, just using div as an example here), but display its children.

The example html code:

Code:

<div id="parent-div">
<div id="child-div-01">Child Div 01</div>
<div id="child-div-02">Child Div 02</div>
</div>

The css code that accomplishes this (using jQuery):

Code:

$('#parent-div').css('visibility','hidden'); //selects the parent-div and sets it to invisible
$('#parent-div > div').css('visibility','visible'); //selects all children of parent-div that are also of type div and sets them to visible

NOTE:
If you're using this, and trying to hide a "styled" parent-div, you may notice that (as it should) the parent-div still takes up space on the screen...
In my case, I was hiding a div that was part of a vertical menu on a webpage, because I wanted to re-use those links in a menu that followed the user as she scrolled down the page, however I wanted to make sure that without javascript, the menu would still show up as a vertical menu. So I changed the firs tline to the following to "reclaim" the space taken up by the div.

Code:

$('#parent-div').css({'visibility':'hidden','width':'0px','height':'0px','margin':'0','padding':'0'});

This effectively hid the parent-div and neutralized its usage of space.

You could also do this with straight CSS (probably better to do by class for the children instead of by id:

Code:

#parent-div{ //by id
visibility:hidden
width:0px;
height:0px;
margin:0;
padding:0;
}
#parent-div div.child-div{ //by class
visibility:visible;
}

I hope someone finds this to be useful!

~Xomby

How to display a child element while hiding a parent

How to display a child element while hiding a parent

Comment

Comment

Comment

Comment

Comment

Comment

Comment