JSFiddle - React, Tailwind, and code Playground
HTML
<div class="sector1">
<h2>Sector 1</h2>
<div class="js-pushdown1">
<button class="js-pushdown-btn" data-panel="panel1">Panel 1</button>
<div id="panel1" class="js-pushdown-panel">This is panel 1</div>
</div>
<div class="js-pushdown2">
<button class="js-pushdown-btn" data-panel="panel2">Panel 2</button>
<div id="panel2" class="js-pushdown-panel">This is panel 2</div>
</div>
</div>
<div class="sector2">
<h2>Sector 2</h2>
<div class="js-pushdown1">
<button class="js-pushdown-btn" data-panel="panel3">Panel 3</button>
<div id="panel3" class="js-pushdown-panel">This is panel 3</div>
</div>
<div class="js-pushdown2">
<button class="js-pushdown-btn" data-panel="panel4">Panel 4</button>
<div id="panel4" class="js-pushdown-panel">This is panel 4</div>
</div>
</div>
CSS
.js-pushdown-panel {
display: none;
}
.js-pushdown-panel.is-active {
display: block;
}
JavaScript
var PushdownProto = {
init: function(elem) {
this.element = $(elem);
this.btn = this.element.find('.js-pushdown-btn');
this.bindEvents();
},
open: function open() {
var panel = this.btn.data('panel');
this.btn.addClass('is-active');
$('#' + panel).addClass('is-active');
},
close: function close() {
var panel = this.btn.data('panel');
this.btn.removeClass('is-active');
$('#' + panel).removeClass('is-active');
},
toggle: function toggle(e) {
console.log(e);
if ($(e.target).hasClass('is-active')) {
this.close();
} else {
this.open();
}
},
bindEvents: function bindEvents() {
var self = this;
this.element.find('.js-pushdown-btn').on('click', $.proxy(self.toggle, this));
}
};
var PickerProto = {
init: function init(sector) {
var origin = sector + ' .js-pushdown1';
var destination = sector + ' .js-pushdown2';
Pushdown1 = Object.create(PushdownProto);
Pushdown1.init(origin);
Pushdown2 = Object.create(PushdownProto);
Pushdown2.init(destination);
}
}
var SectorPicker1 = Object.create(PickerProto);
SectorPicker1.init('.sector1');
var SectorPicker2 = Object.create(PickerProto);
SectorPicker2.init('.sector2');