JSFiddle - React, Tailwind, and code Playground

HTML

<!--
When the animation finishes, click the first row to see new content and
repeat the animation.
-->
<div id="wrap">
    <table>
        <tr><td>Click to see it in action</td></tr>
    </table>
</div>

CSS

#wrap { overflow:hidden; outline:dotted blue 1px; }

JavaScript

// Array for first row information, I'm faking an AJAX update
var title = [
    'Click to repeat',
    'It\'s fun to click it',
    'Maybe another click',
    'Have to love callback functions'
    ]

// Same as above
var content = [
    'First bit of content from some source',
    'Bit of content #2 from some source',
    'A third title row from some source',
    'Yet a fourth title row from some source'
    ]

// Number generator to pull stuff from the arrays
var numRand;
function getEl(arg) {
    numRand = Math.floor(Math.random() * arg.length)
    return numRand;
}

var baseH = $('tr:first-child').height();
$('#wrap').height(baseH);

$('#wrap table tr:first-child').toggle(function() {
    $(this).after('<tr><td>' + content[getEl(content)] + '</td></tr>');
    $('#wrap').stop(true,true).animate({ height: $('table').height() });
}, function() {
    $('#wrap').stop(true,true).slideUp(500, function() {
        $('tr:first-child').text(title[getEl(title)]);
        $('tr:not(":first-child")').remove();
        $(this).height(baseH);
    }).slideDown(500);
});