JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="test">
    <h2>
        <a href="#test" class="toggle show">Show contents</a>
        <a href="#" class="toggle hide">Hide contents</a>
    </h2>
    <div>
        <p>Some contents</p>
        <p>Some more contents</p>
        <p>Some more contents again</p>
    </div>
</div>

CSS

#test > div {
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease-in;
    background: #f0f0f0;
}

#test:target > div {
    max-height: 200px;
}

h2 {
    position: relative;
    display: inline-block;
}

h2 a.toggle.hide,
:target h2 a.toggle.show {
    display: none;
}

h2 .toggle.show,
:target h2 .toggle.hide {
    display: inline-block;
}