JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col">
        Content 
        <div id="slidebtn-1-content" class="hide content">
            Hidden content goes here
        </div>
        <a id="slidebtn-1" class="more-btn" href="#slidecontent-1">Read more1</a>
    </div>
    <div class="col">
        Content 
        <div id="slidebtn-2-content" class="hide content">
             Hidden content goes here
        </div>
        <a id="slidebtn-2" class="more-btn" href="#slidecontent-2">Read more2</a>
    </div>

CSS

div.hide{
 display: none;   
}

JavaScript

$('.more-btn').live('click', function(e) {
    var thisElt = $('#' + this.id)
    var prevSlid = $('.slidDown');
    if (prevSlid) {
        prevSlid.slideToggle(500);
        prevSlid.removeClass('slidDown');
    }
    if(prevSlid.length == 0 || 
           (prevSlid.length != thisElt.length && prevSlid.length != prevSlid.filter(thisElt).length)) {
        var nextSlide = $('#' + this.id + '-content');
        nextSlide.addClass('slidDown');
        $('#' + this.id).text('Close');
        nextSlide.slideToggle(500);
    }
    return false;
});