JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div id="box-outer">
<div id="data-box"> This is your data. </div>
<div id="box" style="margin-top: 0px; ">Blind me up. Blind me up. Blind me up.</div>

</div>
    
<button id="blind">BLIND</button>

CSS

#box {
  padding: 10px;
  height: 100px;
  width: 100px;
  background: #e459e9;
  position:relative;
}
#box-outer {
  overflow: hidden;
  height: 120px;
  margin: 20px;
}
#data-box {
  padding: 10px;
  height: 100px;
  width: 100px;
  background: #eee;
  position:absolute;
}

JavaScript

jQuery.fn.blindToggle = function(speed, easing, callback) {
    var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
    return this.animate({
        marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
    }, speed, easing, callback);
};



$('#blind').click(function() {
    $('#box').blindToggle('slow');
});