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;
}
.obsah {
    display: none;
}
.obal-open .nadpis{
    display: none;
}
.obal-open .obsah{
    display: block;
}

JavaScript

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