JSFiddle - React, Tailwind, and code Playground

by wind_chime18

HTML

<a href="#" id="button" class="button_style">Show content</a>
<div id="hidden_content">Content</div>

CSS

#hidden_content{
    height: 0;
    overflow: hidden;
    transition: height 0.8s ease;
}

JavaScript

document.getElementById('button').onclick = function() {
    this.__toggle = !this.__toggle;
    var target = document.getElementById('hidden_content');
    if( this.__toggle) {
        target.style.height = target.scrollHeight+"px";
        this.firstChild.nodeValue = "Hide content";
    }
    else {
    alert('test');
        target.style.height = 0;
        this.firstChild.nodeValue = "Show content";
    }
}