JSFiddle - React, Tailwind, and code Playground

by Takazudo

HTML

<div class="someUI">
    <div>
        <button class="button1">button1</button>
        <button class="button2">button2</button>
    </div>
    <div class="content">
        CONTENT!
    </div>
</div>

CSS

body{
    padding:20px;
}
.someUI{
    width:300px;
    border:1px solid #000;
    padding:10px;
}
    .content{
        border:1px solid #000;
        font-size:2em;
        padding:10px;
        margin:10px 0 0;
        text-align:center;
    }

JavaScript

var SomeUI = function($el) {
    this.$el = $el;
    this.$content = $el.find('.content');
    this.$button1 = $el.find('.button1');
    this.$button2 = $el.find('.button2');
    this._eventify();
};
SomeUI.prototype._eventify = function() {
    this.$button1.click($.proxy(function(){
        this.instantToggle();
    }, this));
    this.$button2.click($.proxy(function(){
        return this.delayedToggle();
    }, this));
    return this;
};
SomeUI.prototype.instantToggle = function() {
    this.$content.fadeToggle();
    return this;
};
SomeUI.prototype.delayedToggle = function() {
    setTimeout($.proxy(function(){
        this.$content.fadeToggle();
    }, this), 1000);
    return this;
};

$.fn.someUI = function() {
    return this.each(function() {
        new SomeUI($(this));
    });
};

$(function() {
    return $('.someUI').someUI();
});