CODEWITHSUNDEEP
javascriptjquerycss
aaviss
aaviss

Reputation: 411

Hide/Show div without affecting the inner elements

The Basic Issue:

After hidden Parent is made :visible, it's children are remaining "invisible"

I have the HTML as following

    <div class="root">
      <h3>Title</h3>
      <div>
        <p>description</p>
        <div>Sub one description</div>
        <div>
          <table>
            <tbody><tr><td><div>Flag</div></td></tr></tbody>
          </table>
      </div>
    </div>
  <div>

When I use .root {display:none;} or $('.root').slideUp(500); the inner div and inner TD element are made display as none. So when I expand the root or make .root{display:block;} or $('.root').slideDown(500); the inner div and TD are not shown. Is it possible to hide and show the full root div without affecting the inner elements.

I tried $('.root').hide(); and $('.root').css('height','0'); 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.

Edited:

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.

Upvotes: 0

Views: 1276

Answers (2)

Johan Haest
Johan Haest

Reputation: 4421

What is the problem here, your problem must be something else hiding your childs. Can't you share some code?

The explained problem works just fine here:

http://jsfiddle.net/48xKS/

$('.root').slideUp(500);

setTimeout(function() {
      $('.root').slideDown(500); 
}, 2000);

Upvotes: 1

asim-ishaq
asim-ishaq

Reputation: 2220

I think you must not use display:block to show the node.

Use the following to hide:

$('.root').css('display','none');

and the following to show:

$('.root').css('display','');

by this way i think it will not affect your html when root is shown again

Upvotes: 0

Related Questions