JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<a href="#test">Toggle hidden DIV with display: table</a>
<div id="test" class="cssTable">
    <p>Some</p>
    <p>Text</p>
</div>

<hr />

<a href="#test2">Toggle visible DIV with display: table</a>
<div id="test2" class="cssTable">
    <p>Some</p>
    <p>Text</p>
</div>

CSS

.cssTable {
    display: table;
    background: grey;
}

.cssTable p {
    display: table-cell;
}

#test {
    display: none;
}

JavaScript

$('.cssTable:hidden').each(function() {
    this.style.display = "none"; // Set to not empty string
    $._data(this, 'olddisplay', 'table');
});

$("a").click(function() {
    $(this).next().slideToggle();
})