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: /

I manually set it to table-row after it's plete, 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"})});
});

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/7Ay3z/

I manually set it to table-row after it's plete, 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"})});
});

• javascript
• jquery
• css

• Is there any way you could not use a table for this? – Rory McCrossan Commented Apr 12, 2012 at 15:18
• 1 possible duplicate: stackoverflow./q/467336/681807 – My Head Hurts Commented Apr 12, 2012 at 15:19
• stackoverflow./questions/467336/… – Greg B Commented Apr 12, 2012 at 15:21
• 1 @Rory: unfortunately no, it's a dataTable I have to add extra contents to rows as they're clicked. I hate tables :( – bevacqua Commented Apr 12, 2012 at 15:22

2 Answers 2

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./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.

 $el.slideDown(function() {$(this).css('display', '');});