JSFiddle - React, Tailwind, and code Playground

by wwt

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

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";
    }

}