<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 underp
- click
lnkC1
orlnkC2
to hide individual child div
But it seems that I didn't get .children()
working correctly. So how to fix it? Any ideas?