Question

48

How to show all child nodes in jQuery

rated 0 times [ 51] [ 3] / answers: 1 / hits: 27553 / 12 Years ago, fri, december 7, 2012, 12:00:00

<a href=javascript:(void); id=lnkP>show all children</a>

<a href=javascript:(void); id=lnkC1>hide child 1</a>

<a href=javascript:(void); id=lnkC2>hide child 2</a>



<div id=p style=display:none;>

<div id=c1>child 1</div>

<div id=c2>child 1</div>...

</div>



$(#lnkP).click(function(){

    $(#p).children().show(); //seems there's a problem here...

});

$(#lnkC1).click(function(){

   $(#c1).hide(); 

});

$(#lnkC2).click(function(){

   $(#c2).hide(); 

});

jsFiddle: http://jsfiddle.net/CBGsF/1/

What I am trying to do is:

p is a parent container

click show all children link, display
all child divs under p

click lnkC1 or lnkC2 to hide
individual child div

But it seems that I didn't get .children() working correctly. So how to fix it? Any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

travion

Add To Favorites

Follow

Total Points: 137

Total Questions: 96

Total Answers: 103

Location: India

Member since Wed, Aug 4, 2021

3 Years ago

travion questions

1 Tagify set data in tagify input on click

Mon, Dec 16, 19, 00:00, 5 Years ago

1 Laravel - How to Import Vue Component to Another Component

Sat, Oct 19, 19, 00:00, 5 Years ago

1 Date conversion in react js

Fri, Sep 20, 19, 00:00, 5 Years ago

1 How can I style react semantic components?

Wed, Nov 14, 18, 00:00, 6 Years ago

1 Problem with onChange for Masked Input in React

Sun, Oct 28, 18, 00:00, 6 Years ago

View All

answered 12 Years ago juliettec · Accepted Answer

Since the parent (#p in your case) has a display:none, it's children won't be visible.

You'll need to show the parent first,

$(#p)

.show()

.children().show();

(jQuery's chaining, very helpful)

Please try and get rid of the inline styling (it gets unmanageable after a while), use classes as much as possible.

You can have a class in css,

.displayNone

{

    display: none;

} 

.displayBlock

{

   display: block;

}

And then use jquery methods .removeClass(), .addClass() or .toggleClass() to show/hide your elements.

This is just a recommendation :)

Test link: http://jsfiddle.net/CBGsF/8/