title: Hide/Show div without affecting the inner elements
body: <h2>The Basic Issue:</h2>
  
  <p>After hidden Parent is made <code>:visible</code>, it's children are remaining "<em>invisible</em>"</p>
  
  <hr>
  
  <p>I have the HTML as following</p>
  
  <pre><code>    &lt;div class="root"&gt;
        &lt;h3&gt;Title&lt;/h3&gt;
        &lt;div&gt;
          &lt;p&gt;description&lt;/p&gt;
          &lt;div&gt;Sub one description&lt;/div&gt;
          &lt;div&gt;
            &lt;table&gt;
              &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;div&gt;Flag&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;div&gt;
  </code></pre>
  
  <p>When I use <code>.root {display:none;}</code> or <code>$('.root').slideUp(500);</code> the inner div and inner TD element are made display as none. So when I expand the root or make <code>.root{display:block;}</code> or <code>$('.root').slideDown(500);</code> the inner div and TD are not shown. Is it possible to hide and show the full root div without affecting the inner elements.</p>
  
  <p>I tried <code>$('.root').hide();</code> and <code>$('.root').css('height','0');</code> and animate function in jquery nothing works out. Please help me in hiding and showing the root completely but without affecting the inner elements style. Thanks in advance.</p>
  
  <p>Edited:</p>
  
  <p>I have to hide the child elements also but when i shown the root the child elements should also be showed. Now the child elements are not shown.</p>