JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<p>red orange yellow green blue indigo violet</p>

<div>
    <p>red orange yellow green blue indigo violet</p>
</div>

JavaScript

(function( $ ) {
 
    $.fn.showMore = function(options) {
        var settings = $.extend({
            max: 25, //max characters
            moreText: "Show More", 
            lessText: "Show Less",
            ellipsis: true, //append  "..." 
            color: "black"
        }, options );
        
        return this.each(function() {
            var $this = $(this),
                oldText = $this.text();
            
            if(oldText.length > settings.max){
                var newText = oldText.substring(0, settings.max),
                    a = $('<a></a>')
                    .addClass('moreLess')
                    .data({
                    'open': false,
                    'fullText': oldText,
                    'shortText': newText
                    })
                    .text(settings.moreText)
                    .css('color', settings.color)
                    .click(function(){
                        var $this = $(this),
                            p = $this.closest('p'),
                            a = $this;
                        
                        $this.data('open', !$this.data('open'));
                        
                        var open = $this.data('open');
                        
                        if(open)
                            p.html(
                                open ? 
                                $this.data('fullText') : 
                                $this.data('shortText')
                            )
                            .siblings('.moreLess')
                            .html(
                                open ? 
                                settings.moreText :
                                settings.lessText
                            );
                        
                        
                        
                    });
                
                console.log(a.data('open'),a.data('fullText'), a.data('shortText'));

                 
           ...