javascript - Jquery .slideToggle("slow"); Not work properly for table expander

I try to add .slideToggle("slow"); functionality to my table as per define here. W3Schools

Toggle effect work but properly. I need effect like as per above w3school link. You can see my code at JSfiddle

Is there any sort method to this (Table expander) without use of any plugin ?

Here Is My Code For HTML Table

 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle" style="overflow-x: scroll; ">
            <tr>
              <td class="tableviewtop"><input name="" type="checkbox" value=""></td>
              <td class="tableviewtop textaligncenter">Material Name</td>
              <td class="tableviewtop textaligncenter"></td>
              <td class="tableviewtop textaligncenter">Color</td>
              <td class="tableviewtop textaligncenter">Base Price</td>
              <td class="tableviewtop textaligncenter">MSRP</td>
              <td class="tableviewtop textaligncenter">MAP</td>
              <td class="tableviewtop textaligncenter">Net Price</td>
              <td class="tableviewtop textaligncenter">Units Ord.</td>
              <td class="tableviewtop textaligncenter">Total Base Price</td>
              <td class="tableviewtop textaligncenter">Total Net Price</td>
              <td class="tableviewtop textaligncenter">Dis %</td>
            </tr>
            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "" style = "padding-left:3px;" id = "tda"/></td>
              <td class="textaligncenter">$55.00</td>
              <td class="textaligncenter">$110.00</td>
              <td class="textaligncenter">$110.00</td>
              <td class="textaligncenter">$110.00</td>
              <td class="textaligncenter">140</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "tra1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "tra2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "" style = "padding-left:3px;" id = "tdb"/></td>
              <td class="textaligncenter">$35.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">120</td>
              <td class="textaligncenter">$3548.00</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">5%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trb1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trb2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "" style = "padding-left:3px;" id = "tdc"/></td>
              <td class="textaligncenter">$60.00</td>
              <td class="textaligncenter">$120.00</td>
              <td class="textaligncenter">$120.00</td>
              <td class="textaligncenter">$120.00</td>
              <td class="textaligncenter">210</td>
              <td class="textaligncenter">$2582.00</td>
              <td class="textaligncenter">$1899.00</td>
              <td class="textaligncenter">30%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trc1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trc2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "" style = "padding-left:3px;" id = "tdd"/></td>
              <td class="textaligncenter">$20.00</td>
              <td class="textaligncenter">$40.00</td>
              <td class="textaligncenter">$40.00</td>
              <td class="textaligncenter">$40.00</td>
              <td class="textaligncenter">155</td>
              <td class="textaligncenter">$6521.00</td>
              <td class="textaligncenter">$6845.00</td>
              <td class="textaligncenter">12%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trd1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trd2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "" style = "padding-left:3px;" id = "tde"/></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">196</td>
              <td class="textaligncenter">$2579.00</td>
              <td class="textaligncenter">$956.00</td>
              <td class="textaligncenter">6%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "tre1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "tre2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "" style = "padding-left:3px;" id = "tdf"/></td>
              <td class="textaligncenter">$80.00</td>
              <td class="textaligncenter">$160.00</td>
              <td class="textaligncenter">$160.00</td>
              <td class="textaligncenter">$160.00</td>
              <td class="textaligncenter">128</td>
              <td class="textaligncenter">$1899.00</td>
              <td class="textaligncenter">$3548.00</td>
              <td class="textaligncenter">5%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trf1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trf2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "" style = "padding-left:3px;" id = "tdg"/></td>
              <td class="textaligncenter">$30.00</td>
              <td class="textaligncenter">$60.00</td>
              <td class="textaligncenter">$60.00</td>
              <td class="textaligncenter">$60.00</td>
              <td class="textaligncenter">451</td>
              <td class="textaligncenter">$6845.00</td>
              <td class="textaligncenter">$2582.00</td>
              <td class="textaligncenter">30%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trg1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trg2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "" style = "padding-left:3px;" id = "tdh"/></td>
              <td class="textaligncenter">$35.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">618</td>
              <td class="textaligncenter">$956.00</td>
              <td class="textaligncenter">$6521.00</td>
              <td class="textaligncenter">8%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trh1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trh2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "" style = "padding-left:3px;" id = "tdi"/></td>
              <td class="textaligncenter">$44.00</td>
              <td class="textaligncenter">$88.00</td>
              <td class="textaligncenter">$88.00</td>
              <td class="textaligncenter">$88.00</td>
              <td class="textaligncenter">426</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">$2579.00</td>
              <td class="textaligncenter">15%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "tri1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "tri2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

          </table>

Jquery Code

// Table jquery code start

$("#tda").click(function () {
    $("#tra1").slideToggle("slow");
    $("#tra2").slideToggle("slow");
});
$("#tdb").click(function () {
    $("#trb1").toggle("slow");
    $("#trb2").toggle("slow");
});
$("#tdc").click(function () {
    $("#trc1").toggle("slow");
    $("#trc2").toggle("slow");
});
$("#tdd").click(function () {
    $("#trd1").toggle("slow");
    $("#trd2").toggle("slow");
});
$("#tde").click(function () {
    $("#tre1").toggle("slow");
    $("#tre2").toggle("slow");
});
$("#tdf").click(function () {
    $("#trf1").toggle("slow");
    $("#trf2").toggle("slow");
});
$("#tdg").click(function () {
    $("#trg1").toggle("slow");
    $("#trg2").toggle("slow");
});
$("#tdh").click(function () {
    $("#trh1").toggle("slow");
    $("#trh2").toggle("slow");
});
$("#tdi").click(function () {
    $("#tri1").toggle("slow");
    $("#tri2").toggle("slow");
});

// Table jquery code end

I try to add .slideToggle("slow"); functionality to my table as per define here. W3Schools

Toggle effect work but properly. I need effect like as per above w3school link. You can see my code at JSfiddle

Is there any sort method to this (Table expander) without use of any plugin ?

Here Is My Code For HTML Table

 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle" style="overflow-x: scroll; ">
            <tr>
              <td class="tableviewtop"><input name="" type="checkbox" value=""></td>
              <td class="tableviewtop textaligncenter">Material Name</td>
              <td class="tableviewtop textaligncenter"></td>
              <td class="tableviewtop textaligncenter">Color</td>
              <td class="tableviewtop textaligncenter">Base Price</td>
              <td class="tableviewtop textaligncenter">MSRP</td>
              <td class="tableviewtop textaligncenter">MAP</td>
              <td class="tableviewtop textaligncenter">Net Price</td>
              <td class="tableviewtop textaligncenter">Units Ord.</td>
              <td class="tableviewtop textaligncenter">Total Base Price</td>
              <td class="tableviewtop textaligncenter">Total Net Price</td>
              <td class="tableviewtop textaligncenter">Dis %</td>
            </tr>
            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "http://www.iconfinder./icons/14227/download/png/16" style = "padding-left:3px;" id = "tda"/></td>
              <td class="textaligncenter">$55.00</td>
              <td class="textaligncenter">$110.00</td>
              <td class="textaligncenter">$110.00</td>
              <td class="textaligncenter">$110.00</td>
              <td class="textaligncenter">140</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "tra1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "tra2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "http://www.iconfinder./icons/14227/download/png/16" style = "padding-left:3px;" id = "tdb"/></td>
              <td class="textaligncenter">$35.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">120</td>
              <td class="textaligncenter">$3548.00</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">5%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trb1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trb2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "http://www.iconfinder./icons/14227/download/png/16" style = "padding-left:3px;" id = "tdc"/></td>
              <td class="textaligncenter">$60.00</td>
              <td class="textaligncenter">$120.00</td>
              <td class="textaligncenter">$120.00</td>
              <td class="textaligncenter">$120.00</td>
              <td class="textaligncenter">210</td>
              <td class="textaligncenter">$2582.00</td>
              <td class="textaligncenter">$1899.00</td>
              <td class="textaligncenter">30%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trc1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trc2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "http://www.iconfinder./icons/14227/download/png/16" style = "padding-left:3px;" id = "tdd"/></td>
              <td class="textaligncenter">$20.00</td>
              <td class="textaligncenter">$40.00</td>
              <td class="textaligncenter">$40.00</td>
              <td class="textaligncenter">$40.00</td>
              <td class="textaligncenter">155</td>
              <td class="textaligncenter">$6521.00</td>
              <td class="textaligncenter">$6845.00</td>
              <td class="textaligncenter">12%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trd1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trd2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "http://www.iconfinder./icons/14227/download/png/16" style = "padding-left:3px;" id = "tde"/></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">196</td>
              <td class="textaligncenter">$2579.00</td>
              <td class="textaligncenter">$956.00</td>
              <td class="textaligncenter">6%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "tre1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "tre2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "http://www.iconfinder./icons/14227/download/png/16" style = "padding-left:3px;" id = "tdf"/></td>
              <td class="textaligncenter">$80.00</td>
              <td class="textaligncenter">$160.00</td>
              <td class="textaligncenter">$160.00</td>
              <td class="textaligncenter">$160.00</td>
              <td class="textaligncenter">128</td>
              <td class="textaligncenter">$1899.00</td>
              <td class="textaligncenter">$3548.00</td>
              <td class="textaligncenter">5%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trf1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trf2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "http://www.iconfinder./icons/14227/download/png/16" style = "padding-left:3px;" id = "tdg"/></td>
              <td class="textaligncenter">$30.00</td>
              <td class="textaligncenter">$60.00</td>
              <td class="textaligncenter">$60.00</td>
              <td class="textaligncenter">$60.00</td>
              <td class="textaligncenter">451</td>
              <td class="textaligncenter">$6845.00</td>
              <td class="textaligncenter">$2582.00</td>
              <td class="textaligncenter">30%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trg1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trg2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "http://www.iconfinder./icons/14227/download/png/16" style = "padding-left:3px;" id = "tdh"/></td>
              <td class="textaligncenter">$35.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">$70.00</td>
              <td class="textaligncenter">618</td>
              <td class="textaligncenter">$956.00</td>
              <td class="textaligncenter">$6521.00</td>
              <td class="textaligncenter">8%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "trh1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "trh2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

            <tr>
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter">Demo Name</td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "http://www.iconfinder./icons/14227/download/png/16" style = "padding-left:3px;" id = "tdi"/></td>
              <td class="textaligncenter">$44.00</td>
              <td class="textaligncenter">$88.00</td>
              <td class="textaligncenter">$88.00</td>
              <td class="textaligncenter">$88.00</td>
              <td class="textaligncenter">426</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">$2579.00</td>
              <td class="textaligncenter">15%</td>
            </tr>

            <!-- Expander Data Start -->

            <tr style = "display:none;" id = "tri1">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxred.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">255</td>
              <td class="textaligncenter">$3284.00</td>
              <td class="textaligncenter">$7581.00</td>
              <td class="textaligncenter">15%</td>
            </tr>
            <tr style = "display:none;" id = "tri2">
              <td><input name="" type="checkbox" value=""></td>
              <td class="textaligncenter"></td>
              <td class="textaligncenter"><a href="#"></a></td>
              <td class="textaligncenter"><img src = "images/icon_boxyellow.png" /></td>
              <td class="textaligncenter">$25.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">$50.00</td>
              <td class="textaligncenter">511</td>
              <td class="textaligncenter">$2948.00</td>
              <td class="textaligncenter">$4815.00</td>
              <td class="textaligncenter">10%</td>
            </tr>

            <!-- Expander Data End -->

          </table>

Jquery Code

// Table jquery code start

$("#tda").click(function () {
    $("#tra1").slideToggle("slow");
    $("#tra2").slideToggle("slow");
});
$("#tdb").click(function () {
    $("#trb1").toggle("slow");
    $("#trb2").toggle("slow");
});
$("#tdc").click(function () {
    $("#trc1").toggle("slow");
    $("#trc2").toggle("slow");
});
$("#tdd").click(function () {
    $("#trd1").toggle("slow");
    $("#trd2").toggle("slow");
});
$("#tde").click(function () {
    $("#tre1").toggle("slow");
    $("#tre2").toggle("slow");
});
$("#tdf").click(function () {
    $("#trf1").toggle("slow");
    $("#trf2").toggle("slow");
});
$("#tdg").click(function () {
    $("#trg1").toggle("slow");
    $("#trg2").toggle("slow");
});
$("#tdh").click(function () {
    $("#trh1").toggle("slow");
    $("#trh2").toggle("slow");
});
$("#tdi").click(function () {
    $("#tri1").toggle("slow");
    $("#tri2").toggle("slow");
});

// Table jquery code end

Share Improve this question edited May 13, 2013 at 12:29 asked May 13, 2013 at 12:26 Shivam Pandya 1,0613 gold badges30 silver badges66 bronze badges

1 As a quick side note: you can bine jQuery selectors like so: $("#trh1, #trh2").toggle("slow"); – Colin DeClue Commented May 13, 2013 at 14:06

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

Baber provided a link to mrtsherman's jsfiddle code. Modify it to something like:

$('tr').not(':first').children('td').wrapInner('<div>');

$('button').click( function() {
    $('tr').not(':first').slideToggle();
    $('td > div').slideToggle();
});

to make it toggle.

Updated your jsfiddle code see this link > http://jsfiddle/d5hWe/31/

$('tr.main').click(function() {
  $(this).nextUntil("tr.main").delay(1000).slideToggle("slow");
});


//To expand all rows for the table... 
$('tr.main').click(function() {
  $(this).nextAll('.child').delay(1000).slideToggle("slow");
});

your parent rows now have a class of "main" and child rows have the class of "child"

I have added 2 functions that use slideToggle and both work by clicking any where on a parent row. click the parent row will set of 1 second delay and then the child rows for that parent will toggle up/down.

I also added a mented out function that will slideToggle all child rows regardless of what parent is clicked just in-case you need it.

Have a look at this answer, it also has a jsfiddle with it showing a smoother slide for table rows.

Implementing a slide down for table rows

All credit to mrtsherman

For whoever is looking at the actual sliding effect, you can try this:

Add a class toToggle to the rows to toggle

Wrap every <td> content inside a <div> with the same toToggle class:

$('.toToggle').children('td').wrapInner('<div class="toToggle"></div>');

To have the sliding effect, the <td> and the <div> needs to slide together. We gave both the same toToggle class so we can toggle both with one jquery instruction
```
$('.toToggle').toggle(2000);
```

$('.toToggle').children('td').wrapInner('<div class="toToggle"></div>');
$('.toClick').click(function(){
    $('.toToggle').toggle('slow');
});

.toClick {cursor: pointer}
.toClick td {padding: 15px}
.toToggle {padding: 15px}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
    <tr class="toClick">
      <td>click me!</td>
      <td>click me!</td>
    </tr>
    <tr class="toToggle">
      <td>text</td>
      <td>text</td>
    </tr>
    <tr class="toToggle">
      <td>text</td>
      <td>text</td>
    </tr>
</table>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Jquery .slideToggle("slow"); Not work properly for table expander - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)