JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Animované skrývání a odkrývání obsahu</h1>
<div class="obal">
    <h2 class="nadpis">Toto je nějaký nadpis</h2>
    <div class="obsah">
        <h2>Nový nadpis místo prvního</h2>
        <p>Dejme tomu, že je tady nějaký obsah</p>
        <h3>Například seznam položek</h3>        
        <ul>
            <li>Položka 1</li>
            <li>Položka 2</li>
            <li>Položka 3</li>
        </ul>
    </div>
</div>

CSS

* {
    margin: 0;
}
.obal {
    border: 1px solid red;
}
.nadpis {
    overflow: hidden;
    height: 1.2em;
    transition: all 1s;
}
.obsah {
    overflow: hidden;
    max-height: 0;
    transition: all 1s;
    opacity: 0;
}
.obal-open .nadpis {
    height: 0;
    opacity: 0;
}
.obal-open .obsah {
    max-height: 9999em;
    opacity: 1;
}

JavaScript

$( ".obal" ).click(function() {
  $(this).toggleClass('obal-open');
});