bevacqua bevacqua - 4 months ago 13
jQuery Question

slideDown forces display:block

I use the following code to slide down a row, but jQuery enforces

display: block
on the row, when it's supposed to be
, breaking the styling.


I manually set it to
after it's complete, but that is horrendous. How can I work around this?

table {
margin: 25px;
tr {
background-color: #c00;
color: #fff;
border: 1px solid #000;
padding: 10px;
<td style="display:none;">1</td>


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.slideDown("slow",function() {$(this).css({display: "table-row"})});


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

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.