JSFiddle - React, Tailwind, and code Playground

by megarameno

HTML

Lorem ipsum dolor sit amet, minim accusamus dignissim has at, nec esse quas postea in. Vide harum id mei, aperiam legimus delectus an est. Sit quidam verear voluptatum ad, vim definiebas reprimique cu. Eu sea bonorum meliore, possim albucius complectitur vel et. Eum ne ferri persius abhorreant, mel in probatus pertinax, ex usu melior
<a href="#" class="more">show more</a>
<div id="message-box">
<div id="content">
Lorem ipsum dolor sit amet, minim accusamus dignissim has at, nec esse quas postea in. Vide harum id mei, aperiam legimus delectus an est. Sit quidam verear voluptatum ad, vim definiebas reprimique cu. Eu sea bonorum meliore, possim albucius complectitur vel et. Eum ne ferri persius abhorreant, mel in probatus pertinax, ex usu meliorecorpora.
<br><br>
Lorem ipsum dolor sit amet, minim accusamus dignissim has at, nec esse quas postea in. Vide harum id mei, aperiam legimus delectus an est. Sit quidam verear voluptatum ad, vim definiebas reprimique cu. Eu sea bonorum meliore, possim albucius complectitur vel et. Eum ne fe
    </div>
</div>

CSS

#message-box {
height:auto;
width:100%;
margin-top:10px;
margin-left:0px;
text-align:center;
border-top: solid 1px #000;
border-bottom:solid 1px #000;

}

#content {
position:relative;
top:0px;
height:auto;
font-size:16px;
padding:20px;
color:#000;
}

JavaScript

$(document).ready(function() {
    $(".more").on('click', function(){
        $('#message-box').slideToggle(500);
    });
    $('#message-box').slideUp(10);
});