IE8 - CSS visibility: collapse - Doesn't work?

Question

Does the css visibility style "collapse" work in IE8?

The reason I ask this is because I have a div that I am trying to collapse. When I publish my website the div stays visible instead of being collapsed. But when I change it to "hidden" the div is hidden.

The reason I don't just use Hidden instead of Collapse is because I don't want the huge gap on my page.

Answer 1

We can do this by giving visibility in css classes.

#PopUp.show {
    visibility: visible;
}
#PopUp.hide {
    visibility: hidden;
}

Answer 2

display: none;

?

Answer 3

visibility: collapse; is meant only for table elements. Use visibility: hidden on <div>s.

http://www.w3schools.com/css/pr_class_visibility.asp

---

You'll also notice the note on that page:

Note: No versions of Internet Explorer (including IE8) support the property values "inherit" or "collapse".

Answer 4

Well it seems visibility: collapse can be used in IE as well. I am using it and it is working in both IE and Firefox. Dont know about other browsers apart from these two.

I have done the following:

HTML:

<table class="intValidationTable">

<tr class="rangeTR" style="visibility: collapse;">

<tr class="listTR" style="visibility: collapse;">

Javascript + Jquery:

var rows = $('table.intValidationTable tr');

var rangeTR = rows.filter('.rangeTR');

var listTR = rows.filter('.listTR');

rangeTR.css("visibility", "visible");

listTR.css("visibility", "collapse");

This should work!