JSFiddle - React, Tailwind, and code Playground

by magicaj

HTML

<div id="messageBodyDisplay">
    <div class="truncated-body">This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content...<a id="viewMore" href="#">View More</a>
    </div>
    <div class="full-body">
        This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content
    </div>
</div>

CSS

.full-body { display: none; }

JavaScript

LITHIUM = {};
LITHIUM.MessageBodyDisplay = {};

(function($LITH) {
    
    LITHIUM.MessageBodyDisplay = function(containerSelector, truncatedBodySelector, viewMoreLinkSelector, fullBodySelector) {
        var container = $LITH(containerSelector);
        var truncatedBody = container.find(truncatedBodySelector); 
        var viewMoreLink = container.find(viewMoreLinkSelector);
        var fullBody = container.find(fullBodySelector);
        
        viewMoreLink.click(function(event) {        
            truncatedBody.hide();
            fullBody.show();            
            return false;
        });
    }
        
    LITHIUM.MessageBodyDisplay("#messageBodyDisplay", ".truncated-body", "#viewMore", ".full-body");  
    
})($);