title: How to show all child nodes in jQuery
body: <pre><code>&lt;a href="javascript:(void);" id="lnkP"&gt;show all children&lt;/a&gt;
  &lt;a href="javascript:(void);" id="lnkC1"&gt;hide child 1&lt;/a&gt;
  &lt;a href="javascript:(void);" id="lnkC2"&gt;hide child 2&lt;/a&gt;
  
  &lt;div id="p" style="display:none;"&gt;
  &lt;div id="c1"&gt;child 1&lt;/div&gt;
  &lt;div id="c2"&gt;child 1&lt;/div&gt;...
  &lt;/div&gt;​
  
  $("#lnkP").click(function(){
      $("#p").children().show(); //seems there's a problem here...
  });
  $("#lnkC1").click(function(){
     $("#c1").hide(); 
  });
  $("#lnkC2").click(function(){
     $("#c2").hide(); 
  });​
  </code></pre>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/CBGsF/1/" rel="nofollow noreferrer">http://jsfiddle.net/CBGsF/1/</a></p>
  
  <p>What I am trying to do is:</p>
  
  <ol>
  <li><code>p</code> is a parent container </li>
  <li>click <code>show all children</code> link, display
  <strong>all child divs</strong> under <code>p</code> </li>
  <li>click <code>lnkC1</code> or <code>lnkC2</code> to hide
  individual child div</li>
  </ol>
  
  <p>But it seems that I didn't get <code>.children()</code> working correctly. So how to fix it? Any ideas?</p>