JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit iaculis sem, nec pharetra eros fermentum quis.</p> 
    
    <p class="more">Read more >></p>
    
    <div class="description">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit iaculis sem, nec pharetra eros fermentum quis. Donec laoreet nunc sed tincidunt convallis. Cras purus nibh, dapibus quis magna vestibulum, gravida aliquet urna.</p> 
    </div>
</div>

CSS

.box {
    border: 1px solid #b3b3b3;
    width: 200px;
    border-radius: 12px;
    position: absolute;
    padding: 20px;
}
.description {
    display: none;
}
.more {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

JavaScript

$( ".more" ).on( "click", function() {
    $( ".description" ).show( "blind", 1000 );
});