JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://viralpatel.net/blogs/demo/jquery/jquery.shorten.1.0.js"></script>
<div class="comment">
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text.
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text. 
    This is a long comment text.    
</div>

<div class="test"></div>

CSS

.comment {
    position: absolute;
    width: 300px;
}

.test {
    position: absolute;
    width: 100px; height: 100px;
    background-color: pink;
    top: 0; right: 0;
    display: none;
}

JavaScript

$(document).ready(function() {
     
$(".comment").shorten({
    "showChars" : 165,
    "moreText"  : "Show More",
    "lessText"  : "Show Less",
});
     
});


$(document).ready(function() {
    $(".morelink").click(function(){
        $(".test").fadeToggle('slow');
    });
});