JSFiddle - React, Tailwind, and code Playground

by eddiemonge

HTML

<div><a id="corporate-info-toggle" class="toggle-div blue-text">More Info</a>
<div id="corporate-info"></div>
</div>

<div><a id="corporate-litigation-toggle" class="toggle-div blue-text">More Info</a>
<div id="corporate-litigation"></div>
</div>

<div><a id="corporate-message-toggle" class="toggle-div blue-text">More Info</a>
<div id="corporate-message"></div>
</div>

CSS

#corporate-litigation, #corporate-info, #corporate-message {
    height: 100px;
    width: 100px;
    background: red;
}
#corporate-info {
    background: blue;
}

#corporate-message {
    background: green;
}

.blue-text {
    cursor: pointer;
}

JavaScript

(function($){
    $.fn.moreInfoToggle = function() {
        return this.each(function() {
            var a = $(this),
                div = $("#" + a.attr('id').replace('-toggle', '') ).hide();
            
            a.on("click", function(e) {
                e.preventDefault();
                if ( !div.is(":visible") ) {    
                    div.slideDown(300);
                    a.html('Less Info');
                }
                else {
                    div.slideUp(300);
                    a.html('More Info');
                }         
            });
        });
    };
})(jQuery);

$('.toggle-div').moreInfoToggle();