JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

Lorem ipsum dolor sit amet
<input id="textAreaToggle" type="checkbox" />
<p id="textarea">
    <!-- This is where I want to additional text-->
    All that delicious text is in here!
</p>
<label for="textAreaToggle">textarea</label>

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

CSS

#textarea {
    display: none;
}

#textAreaToggle:checked + #textarea {
    display: block;
}

input[type="checkbox"] {
    position: absolute;
    left: -1000px;
}
label {
    display: block;
}

#textAreaToggle + #textarea + label::before {
    content: 'Show ';
}

#textAreaToggle:checked ~ #textarea + label::before {
    content: 'Hide ';
}