JSFiddle - React, Tailwind, and code Playground

by Diana Lemen

HTML

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

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

CSS

#textarea {
    display: inline-block;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 75%;
    transition: height 1s;
}

#textarea:target {
     height: auto;
}

#textarea + div.controls {
    list-style-type: none;
    display: inline-block;
}

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

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