JSFiddle - React, Tailwind, and code Playground

HTML

<div class="excerpt">
    <h2>Title</h2>
    <div class="expand" data-show="Show">fat</div>
    <p class="detail">
        Some details that will start hidden.
    </p>
</div>

<div class="excerpt">
    <h2>Title</h2>
    <div class="expand" data-show="Show">Hide</div>
    <p class="detail">
        Some details that will start hidden.
    </p>
</div>

<div class="excerpt">
    <h2>Title</h2>
    <div class="expand" data-show="Show">Hide</div>
    <p class="detail">
        Some details that will start hidden.
    </p>
</div>

CSS

div, p, h2 {
    
    padding: 10px;
    margin: 10px;
}

JavaScript

(function($) {
    $.fn.showHide = function(controls, contents) {
        this.each(function() {
            var container = $(this);
            var control   = container.find(controls);
            var content   = container.find(contents);

            control.data('hide-text', control.text());

            control.click(function() {
                if (content.is(':visible')) {
                    $(this).text(
                        $(this).data('hide-text')
                    );
                    content.slideUp();
                } else {
                    $(this).text(
                        $(this).attr('data-show')
                    );
                    content.slideDown();
                }
            });

            content.hide();
        });
    };
})(jQuery);

$(function() {
    $('.excerpt').showHide('.expand', '.detail');
});