I have an internal table inside an external table that contains data from an external. I decided to hide it and show it only when the user clicks the "Expand" button. I did this with a jQuery slideToggle function like this
$(document).ready(function() {
$('.partTableContent').hide();
$('.expandButton').click(function() {
$(this).closest('tr').next(' tr').find('table').slideToggle(200);
});
});
Html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="partsTable">
<tr>
<td class="sideForPartsTable" width="5%">
<button class="expandButton">Expand button</button>
</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</tr>
<tr>
<td>
<table class="partTableContent">
<tr>
<td> Test1 </td>
</tr>
<tr>
<td> Test2 </td>
</tr>
</table>
</td>
</tr>
</table>
But the animation of this action leaves much to be desired. Hidden content pops up instantly without any smooth animation. I tried using "slow" inside .slideToggle and changing the width of the table. But that did not work. Any ideas?
source
share