How to dynamically show/hide rows in a table

I'm working on a website where I need to show/hide table rows. I got the feature working, but the CSS gets bad when I do show. I'm providing a working link; click the 'More...' link and see the action for an example. I'm using jQuery's toggle(slow) for hiding and showing

I have a page built using tables:

http://r开发者_JAVA技巧atingscorner.com/product_rating.php?alias=Rashtreeya-Vidyalaya-College-of-Engineering-Mysore-Road-Bangalore&product=colleges

If you see the section right side of image where the tick marks are there. After the tick mark the section moves to right hand side. This happened when I did put a code to show/hide the extra features.. any solution for this problem?

OK, I found the problem. You have two tbody tags in the table. This is correct. However, when you use jQuery to show/hide the table, it applies a display: block attribute to the tbody tag which causes browser to render it incorrectly.

Use jQuery to change the display CSS attribute as follows:

• set display: none to hide the "more properties" section
• set display: table-row-group to show the "more properties" section
• OR set display to empty string to let browser show the section the way it should be

The page seems to display correctly in IE8. In Chrome and in FF the problem is that display: block elements inside a table make the browser render the table wrong if there are elements without display: block as well. A solution is either to

• set display: block to the first tbody element already (this is far the easiest solution)
• remove the display: none from the .extra_properties when showing the extra rows (and leaving the display: block off as well) or
• set display: table-row-group when showing. It's to be noted, that display-row-group doesn't work in IE, though.

what problems are you having?

$("tr").click(function() { $(this).hide(); }
$("#showmore").click(function() { $("#tr:hidden").show() }