JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo"></div>

CSS

.sliding-box div { 
    padding:5px 10px; 
    font-family:arial,sans-serif; font-size:10pt;     
}
.sliding-box .header{ font-size:12pt; background-color:#333; color:#fff; }
.sliding-box .message { background-color:#eee; }

JavaScript

(function($){
    
    $.fn.slidingBox = function (header, msg) {
		var div = document.createElement('div');
		div.setAttribute('class','header');
		div.appendChild(document.createTextNode('header');        
        // create HTML elements
        var $header= $('<div></div>').addClass('header').text(header),
            $msg = $('<div></div>').addClass('message').text(msg)
            ;
        
        $header.click(function(){
            $msg.slideToggle('fast');
        });
        
        return this.addClass('sliding-box').append(div).append($msg);                        
    };
    
    
})(jQuery);

jQuery(function($){
    
    $('#foo').slidingBox('header','message');
    
});