slideDown forces display:block
css, javascript, jquery
Solution
Try using the `animate` method instead of `slideDown`. You'll need to do a bit more manual definition of the effect you want, but it won't introduce the `display:block` that's giving you trouble.
Quoted from http://api.jquery.com/animate/:
Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $('someElement').hide().animate({height:'20px'}, 500), the animation will run, but the element will remain hidden.
Problem
I use the following code to slide down a row, but jQuery enforces `display: block` on the row, when it's supposed to be `table-row`, breaking the styling. Fiddle: http://jsfiddle.net/7Ay3z/ I manually set it to `table-row` after it's complete, but that is horrendous. How can I work around this? ``` <style> table { margin: 25px; } tr { background-color: #c00; color: #fff; border: 1px solid #000; padding: 10px; } </style> <table> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td style="display:none;">1</td> </tr> </table> ``` jQ: ``` $("tr").click(function(){ var row = $(this); var visibleLength = row.find("td:visible").length; var hiddenLength = row.find("td:not(:visible)").length; var drillRow = $("<tr/>").addClass("drillDownRow"); var drillColumn = $("<td/>").attr("colspan", visibleLength); var drillHidden = $("<td/>").attr("colspan", hiddenLength).css({display: "none"}); drillColumn.html("test <b>2</b>... ok"); drillRow.hide().append(drillColumn).append(drillHidden).insertAfter(row); drillRow.slideDown("slow",function() {$(this).css({display: "table-row"})}); }); ```