JSFiddle - React, Tailwind, and code Playground

HTML

<span id="SECTION_1_collapse">[+/-]</span><br />
<div id="SECTION_1">
<table>
    <tr><td>Pretend this is lots of stuff</td></tr>
</table>
</div>

CSS

.d {
    position: absolute;
    top:50%;
    left:50%; }

JavaScript

$(function() {
    $("#SECTION_1").hide();
    var $dialog = $("<div>").html("I'm busy.").dialog({autoOpen: false,
                                                       dialogClass: "d",
                                                       title: 'Status'});
    $('#SECTION_1_collapse').toggle(function(){
            $dialog.dialog("open");
              // Simulate a slow delayed table opening
            $("#SECTION_1").fadeIn(5000);
            setTimeout(function() { $dialog.dialog("close"); }, 1500);
    }, function() {
        $("#SECTION_1").hide();
    });
});