JSFiddle - React, Tailwind, and code Playground

by ameen

HTML

<div>
    <div class="top">
        <a href="#" class="trigger">Click Me</a>
    </div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

CSS

.top {
    background-color: gold;
    width: 300px;
    height: 120px;
}

.middle {
    background-color: black;
    overflow: hidden;
    width: 300px;
    height: 0px;
}

.bottom {
    background-color: gold;
    width: 300px;
    height: 200px;
}

.trigger {
    display: block;
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: black;
    width: 50px;
    height: 50px;
}

JavaScript

$$('.trigger').addEvent('click', function(event){
    var middle = $$('.middle')[0];
    
    if( '0px' == middle.getStyle('height') ){
        middle.tween('height', '150');
    }else{
        middle.tween('height', '0');
    }
    
    event.preventDefault();
});