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