Geek Answers Handbook

CSS style Visibility doesn't behave as expected

I have an html page with a main tab control. I use javascript to show and hide tabs and sections of tab content. My problem is that if I change the visibility of an element inside one of the tab contents div to “hidden” and then back to “visible”, the element seems to forget or lose its parent div container and remain visible, regardless of its original parental visibility.

To illustrate this, do the following example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function hideTab(){ document.getElementById('tab1').style.visibility = 'hidden' } function showTab(){ document.getElementById('tab1').style.visibility = 'visible' } function hideContent(){ document.getElementById('tc1').style.visibility = 'hidden' } function showContent(){ document.getElementById('tc1').style.visibility = 'visible' } </script> </head> <body> <a href="javascript: hideTab()">Hide Tab</a><br /> <a href="javascript: showTab()">Show Tab</a><br /> <a href="javascript: hideContent()">Hide Content</a><br /> <a href="javascript: showContent()">Show Content</a><br /><br /> <div id="tab1" style="background:yellow;width:100px"> <div id='tc1'>Content Text</div> </div> </body> </html>

In IE8, click "Hide Tab", then "Show Tab", this works fine. On the tab shown, click Hide Content, then Show Content. This is also true. Now click "Hide Tab" again, and you will see that the tab disappears, but the contents are incorrectly left.

In IE8, the problem disappears when I use compatibility mode. Also, I noticed that if I delete the DOCTYPE element, I cannot replicate the problem.

In Chrome (my personal favorite), the problem remains constant, regardless of the DOCTYPE element. I have not tried this in firefox.

I am sure there is a very good reason for this behavior, I am also sure that for me there will be a simple solution so that my tabs work correctly. I look forward to your comments.

+6
javascript dom visibility css
source share
3 answers

This is because the CSS visibility property is inherited, but does not affect the page layout. Therefore, if you set a hidden element, all its children will be, unless you explicitly make them visible (which is the case by specifying visibility: visible ).

You must reset the CSS property to be inherited in order to get the desired behavior. You can do this using the inherit keyword as the value: visibility: inherit

EDIT Or, like Javascript:

 element.style.visiblity = 'inherit';
+16
source share

I assume your example is simplified, and in your actual code you have several tabs. In this case, I am surprised that the answers posted worked for you. Don't you want tc1 visibility to be preserved when you return to tab1? If you do, then stick to your original idea, but change the functions of the tab as shown:

 function hideTab(){ document.getElementById('tab1').style.display = 'none' } function showTab(){ document.getElementById('tab1').style.display = 'block' }

Note that I am changing the display property in the parent div - not the visibility property.

+2
source share

Instead of setting the visibility of the child to "visible", set it to "inherit" - then it will obey the visibility settings of its parents, and not redefine it independently.

+1
source share

More articles:


All Articles