JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#test" id="link">text</a>
<div id="test">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>

CSS

#link {
    display:block;
    border:1px solid #ccc;
    border-radius:9px;
    padding:15px;
}
#link.active {
    border-bottom:0;
    border-radius: 9px 9px 0 0;
}
#test {
    border:1px solid #ccc;
    border-top:0;
    border-radius: 0 0 9px 9px ;
    padding:15px;
    display:none;
}

JavaScript

window.onload = function(){
    document.getElementById("link").onclick = function(){
    if(/active/.test(this.className)){
        this.className = "";
        document.getElementById("test").style.display = "none";
    }else{
        this.className = "active";
        document.getElementById("test").style.display = "block";
    }

}
    }