Monday, December 10, 2012

visibility: collapse can be used in IE as well

It is believed that no versions of Internet Explorer (including IE8) support the "visibility" property value "collapse". But guess what! You can use "visibility: collapse" for your rows in a table in HTML:

First of all why use "visibility: collapse;"?

"visibility: collapse;" hides an element entirely (so that it doesn't occupy any space in the layout), but only when the element is a table element.
If used on elements other than table elements, "visibility: collapse;" will act like visibility:hidden This makes an element invisible, but it will still occupy space in the layout. display:none hides an element entirely, so it doesn't occupy any space in the layout, but it shouldn't be used on table elements.

Source: W3 reference 

So now if you wish to hide certain rows of your table and display them dynamically based on certain action then you can do the following:

1. First assign a class to the <table>. For eg:
1:  <table class="tableClass">  

2. Create rows in table and assign class to these rows as well as shown below


1:  <tr class="rangeTR" style="visibility: collapse;">  
2:  <tr class="listTR" style="visibility: collapse;">  
Notice we have assigned the style element style="visibility: collapse;" to these rows.
Hence, on page load these rows will not be visible.
 
3. Now with the help of JQuery you can write a code to control the display of these <tr> tags. 
Following is the code for it:

 //Get all the rows of the table into a JavaScript object  
 var rows = $('table.tableClass tr');   
 //Get the handle to each row using their class names  
 var rangeTR = rows.filter('.rangeTR');  
 var listTR = rows.filter('.listTR');  
 //Now to make the row visible use this  
 rangeTR.css("visibility", "visible");  
 //To hide the row use this  
 listTR.css("visibility", "collapse");  
 
That's it! 

Now you can control your the display of rows in a table dynamically. 
No need to use "display:none".
Hope this is helpful. 
Comments and suggestions are appreciated.