JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Title (<a rel="collapsable[#testdiv]" href="#">Expand</a>)</h1>
<div id="testdiv">
    <p>Display the contents in here.</p>
</div>

CSS

#testdiv {
    display: none;
}

JavaScript

// jquery.collapsable.js

(function($) {
    
    $.fn.collapsable = function(options) {
        
        // Store this instance for closure access; and default settings.
        var self = this;
        var settings = $.extend({
                                    collapse_txt: "Collapse",
                                    expand_txt:   "Expand"
                                }, options);
        
        // Bind a click event to each found element; and trigger the toggle.
        this.live("click", function(e) {
            e.preventDefault();
           
            // Collect the relative selector from the rel attribute.
            var selector = /\[(.*?)\]/i.exec($(this).attr("rel"))[1];
           
           // FEATURE/BUG! Only toggle the display when animating is FALSE.
            if ($(selector).data("animating") !== false) {
                // before animation; set animating boolean to true.
                $(selector).data("animating", true).stop().toggle("slow", function() {
                    // set animating boolean to false.
                    $(this).data("animating", false);
                });
                
                // change the text..
                $(this).text($(this).text() === settings.collapse_txt ? settings.expand_txt : settings.collapse_txt);
            }; 
        });
        
    };
    
})(jQuery);

// normal JS

$(document).ready(function() {
    $("a[rel^=collapsable]").collapsable();
});