How to display a child element while hiding a parent

D

dweeti

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").style.display="none";

Hides all the child elements.

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

Thanks in advance.
 
C

Captain Paralytic

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").style.display="none";

Hides all the child elements.

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

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

dweeti

Just hide all thechildelements that you do not want?- Hide quoted text -

- Show quoted text -
Click to expand...

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
 
T

Thomas 'PointedEars' Lahn

<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.
Click to expand...

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").style.display="none";

Hides all the child elements.
Click to expand...

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?
Click to expand...

The equivalent of

$("Parent").style.visibility = "hidden";
$("child_2").style.visibility = "visible";

works in Firefox 2.0.0.14, IE 6.0.2900.2180.xpsp_sp2_gdr.070227-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:

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

You might have to do the equivalent of

$("Parent").style.overflow = "hidden";

to get rid of then-unnecessary scrollbars, too.


HTH

PointedEars
 
D

dweeti

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


You could create a sibling to theparentelementand place it directly
after thatparentelement.

Then move thechildyou want to save to the newparent

Then make the oldparentinvisible

Might need some refinement, but the principle is there
Click to expand...

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

SAM

(e-mail address removed) a écrit :
Dan, I've played around with scripting the concept you've mentioned,
it's quite abit of manipulation
Click to expand...

not so much

function $(id) { return document.getElementById(id); }
function childSchow(parent, child) {
child = $(child).cloneNode(true);
child.className = '';
child.id += 'c';
var parent = $(parent);
parent.parentNode.insertBefore(child, parent);
child.memory = parent.parentNode.removeChild(parent);
}
function parentSchow(child) {
child = $(child+'c');
var parent = child.memory
child.memory = null;
child.parentNode.insertBefore(parent, child);
child.parentNode.removeChild(child);
}


not tested with IE
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to make a flex box inherit its parent (container) background. 0
Javascript not hiding nested elements simultaneously 2
Create a recursive Json object from categories to display on the website menu 2
How to paint an element in screen using javascript? 1
How to display input options only after selecting an option from the 'select class' tag JS? 6
How to display Isometric tiles in pygame 0
How to save JSON Data to a file using fetch() api? 2
<Button ...> display is fine, except for two things 1

Members online

No members online now.
Total: 36 (members: 1, guests: 35)
Robots: 204

Forum statistics

Threads
473,763
Messages
2,569,563
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top