Tablemate is a friendly jQuery plugin that allows you to animate your tables! Unfortunately the core jQuery library doesn't allow for you animate your tables because of limiting factors from the DOM. Tablemate is a hack that wraps a div (class of .tablemate_proc) around your td contents. Then, it majestically animates your tr's like you'd expect!
⚠️ Notice: This plugin is not receiving maintainance, and has not been tested with the latest version of jQuery
- Download
tablemate.min.jquery.js - (Important) Make sure jQuery is accessable by tablemate!
- Include tablemate in the
<head>of your HTML document. Example:<script src="tablemate.min.jquery.js"></script> - You're ready to roll!
In short, tablemate captures the existing definition around .slideDown (and friends) and uses jQuery-like durations.
duration values:
slowis600millisecondsfastis200milliseconds- When nothing is provided,
durationdefaults to400milliseconds - Custom numeric
durationvalue will be translated to time in milliseconds
Toggle slide table row visibility.
.tableToggle(duration, callback)
Slide table row down to make it visible.
.tableDown(duration, callback)
Slide visible table row up to make it invisible.
.tableUp(duration, callback)
HTML
<a href="#" class="toggle">toggle</a>
<table>
<tr class="row">
<td>Data 1
</td>
<td>Data 2
</td>
</tr>
<tr class="row-details">
<td>Detail Data 1
</td>
<td>Detail Data 2
</td>
</tr>
</table>
jQuery
$('.toggle').click(function() {
$('.row-details').tableToggle();
});