jQuery .toggle() not working with TRs in IE

Question

I am using jQuery\'s toggle() to show/hide table rows. It works fine in FireFox but does not work in IE 8.

.show()/.hide() work fine though

Answer 1

Tables are an interesting piece of html, they don't follow normal rules as other elements.

basically tables display as tables, there are special rules for tables but this was not dealt with properly in older browsers because of the roller coaster of craziness that was the browser wars.

Essentially in older browsers tables display properties were minimal and the flow was left largely undocumented so instead of altering predefined values for the table/tr/td tag it is best to instead add and remove the following class and simply toggle the class itself on and off on the attribute of the table/tr/td.

.tableHide {
    display: none;
}


 Visible content
 Visible content
 
 **Hidden Content**

The reason for this is so that it is a separate class being used to toggle the display therefore nothing on the table itself is being changed nor do any of the tables properties need to be altered, display and any related layout properties are preserved even if the browser doesn't make that easy behind the scenes.