JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Hello</h2>

<button>Show more</button>
<div class="hide">
  <p>Here is some sample text.</p>
  <p>Here is some more</p>
  <h2>Another heading</h2>
  <p>More sample</p>
</div>

CSS

.hide {
  display: none;
}

JavaScript

jQuery.fn.extend({
    toggleText: function(stateOne, stateTwo) {
        return this.each(function() {
            stateTwo = stateTwo || '';
            console.log(stateOne, stateTwo, $(this).text());
            $(this).text() !== stateTwo  && stateOne
            ? $(this).text(stateTwo)
            : $(this).text(stateOne);
        });  
    }
});

$('button').on('click', function() {
    $(this).toggleText('Show more', 'Hide').next().toggle();
});