JSFiddle - React, Tailwind, and code Playground

HTML

Here is some text.
<div class="readmore">
    <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>
    <div id="example" class="more">
        <div class="text">
            Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Vestibulum vitae urna nulla. 
            Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. 
            Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </div>
        <p>
            <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a>
        </p>
    </div>
</div>

CSS

#example {
    background: red;
    height: 0px;
    overflow: hidden;
    transition: height 2s;
    -moz-transition: height 2s; /* Firefox 4 */
    -webkit-transition: height 2s; /* Safari and Chrome */
    -o-transition: height 2s; /* Opera */
}

a.showLink, a.hideLink {
    text-decoration: none;
    background: transparent url('down.gif') no-repeat left; 
}

a.hideLink {
    background: transparent url('up.gif') no-repeat left; 
}

JavaScript

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID+'-hide').style.display = 'inline';
            document.getElementById(shID).style.height = '100px';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID+'-hide').style.display = 'none';
            document.getElementById(shID).style.height = '0px';
        }
    }
}