Ho bisogno di mostrare e nascondere righe di una tabella con un'animazione.
Attualmente con questo codice riesco a mostrare/nascondere le righe, ma senza animazione
codice:
<table class="table">
<tr class="header">
<th>Prima riga</th>
</tr>
<tr>
<td>Oratio me istius philosophi non offendit; Duo Reges: constructio interrete.</td>
</tr>
<tr class="header">
<th>Seconda riga</th>
</tr>
<tr>
<td>Oratio me istius philosophi non offendit; Duo Reges: constructio interrete.</td>
</tr>
</table>
<script>
$(document).ready(function() {
$('.table .header').on("click", function() {
$(this).toggleClass("active", "").nextUntil('.header').css('display', function(i, v) {
return this.style.display === 'table-row' ? 'none' : 'table-row';
});
});
})
</script>
Non so quanto siano alte le righe della tabella perché il contenuto cambia dinamicamente secondo l'input degli utenti, quindi non posso indicare quanti px deve coprire l'animazione.
Come posso risolvere?