JSFiddle - React, Tailwind, and code Playground

by dnielF

HTML

<div id="vision-sidebox">xxx</div>
<div id="vision-pane" class="sidebox-close">xxx</div>
<div id="vision-tab">xxx (clic aquí)</div>

<div id="mision-sidebox">yyy</div>
<div id="mision-pane" class="sidebox-close">yyy</div>
<div id="mision-tab">yyy (clic aquí)</div>

JavaScript

var j = $;
sidebox = {
    me : "hola",
    closeBtn : null,
    visible : false,
    tab : null,
    init : function(boxName){
       
        this.me = j('#'+boxName+'-sidebox');
        this.closeBtn = j('#'+boxName+'-pane.sidebox-close');
        this.tab = j('#'+boxName+'-tab');
      
        this.me.css("top", window.height / 3 ); // vertical position
      
        this.tab.bind("click", this.show );  // show
        this.closeBtn.bind("click", this.hide ); // hide
    
        return this;
    },
    show : function(){
        alert("8)");
    },
    hide : function(){
        alert("X(");
     }
}
    
var visionBox = sidebox["init"]("vision");
var missionBox = sidebox["init"]("mision");