JSFiddle - React, Tailwind, and code Playground

by Radiocity

HTML

<div id="container">
    <h1>jQuery slide with minimum height
    <h2>About Billabong</h2>
    <div id="wrap">
        <div>
            <p>Gordon Merchant founded Billabong in Burleigh Heads on the Gold Coast in 1973. Combining his passion for surfing with hard work, Gordon designed boardshorts, manufacturing them on the kitchen table and selling through local surf shops and markets.</p>
            
        </div>
        <div id="gradient"></div>
    </div>
    <div id="read-more"></div>
</div>

CSS

/* simple reset */
html,body,div,h2,p {margin:0;padding:0;}

html {
font:1em Arial, Helvetica, sans-serif;
color:#444;
}
a {color:#0087f1;}
p {margin-bottom:5px;}
#container {
margin:0 auto;
}
#container h2 {
font-size:20px;
color:#0087f1;
}
#wrap {
position: relative;
padding: 10px;
overflow: hidden;
}
#gradient {
width:100%;
height:35px;
background:url(images/bg-gradient.png) repeat-x;
position:absolute;
bottom:0;
left:0;
}
#read-more {
padding:5px;
border-top:4px double #ddd;
background:#fff;
color:#333;
}
#read-more a {
padding-right:22px;
background:url(images/icon-arrow.gif) no-repeat 100% 50%;
font-weight:bold;
text-decoration:none;
}
#read-more a:hover {color:#000;}

JavaScript

$(function(){
    var slideHeight = 80; // px
    var defHeight = $('#wrap').height();
    if(defHeight >= slideHeight){
        $('#wrap').css('height' , slideHeight + 'px');
        $('#read-more').append('<a href="#">Click to Read More</a>');
        $('#read-more a').click(function(){
            var curHeight = $('#wrap').height();
            if(curHeight == slideHeight){
                $('#wrap').animate({
                  height: defHeight
                }, "normal");
                $('#read-more a').html('Close');
                $('#gradient').fadeOut();
            }else{
                $('#wrap').animate({
                  height: slideHeight
                }, "normal");
                $('#read-more a').html('Click to Read More');
                $('#gradient').fadeIn();
            }
            return false;
        });
    }
});