JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

Lorem ipsum dolor sit amet
<p id="textarea">
    <!-- This is where I want to additional text-->
    All that delicious text is in here!
</p>
<ul class="controls">
    <li class="show"><a href="#textarea">Show</a></li>
    <li class="hide"><a href="#">Hide</a></li>
</ul>

<p>Here is some more text</p>

CSS

#textarea {
    display: none;
}

#textarea:target {
    display: block;
}

#textarea + ul.controls {
    list-style-type: none;
}

#textarea + ul.controls .hide,
#textarea:target + ul.controls .show {
    display: none;
}

#textarea:target + ul.controls .hide,
#textarea + ul.controls .show {
    display: inline-block;
}