How to dynamically show/hide rows in a table

Question

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://ratingscorner.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?

Answer 1

what problems are you having?

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

Answer 2

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.

Answer 3

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