JSFiddle - React, Tailwind, and code Playground

simple panels

by Travis Almand

HTML

<!--h2>Simple Useful Panels</h2-->
<div id="sup_right">
  <p>This is the panel from the right.</p>
  <button id="btn_right_2">Open 2nd Panel</button>
  <button id="btn_right_close">Close</button>
</div>

<div id="sup_right_2">
  <p>This is the panel from the right.</p>
  <button id="btn_right_close_2">Close</button>
</div>

<div id="sup_left">
  <p>This is a panel from the left.</p>
  <button id="btn_left_close">Close</button>
</div>

<div id="sup_bottom">
  <p>This is a panel from the bottom.</p>
  <button id="btn_bottom_close">Close</button>
</div>

<div id="sup_top">
  <p>This is a panel from the top.</p>
  <button id="btn_top_close">Close</button>
</div>

<button id="btn_right">right</button>
<button id="btn_left">left</button>
<button id="btn_bottom">bottom</button>
<button id="btn_top">top</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia augue eget nulla dictum rutrum. Fusce eu euismod risus. Aliquam suscipit sapien nec mi hendrerit, sit amet facilisis nulla bibendum. Pellentesque iaculis porttitor condimentum. Pellentesque cursus ipsum vel nibh gravida, facilisis dictum neque suscipit. Praesent tincidunt eget felis id blandit. Suspendisse potenti. Nulla ligula arcu, euismod a erat in, efficitur dignissim erat. Donec sed condimentum erat. In dapibus, risus vel fermentum lobortis, risus mauris consectetur elit, ut accumsan ex massa sit amet lectus. Integer semper dolor dictum lorem commodo dignissim. Ut dapibus odio turpis, vitae semper leo fermentum in. Ut at mollis dui.</p>
<p>Pellentesque pharetra porttitor eros vitae dapibus. Morbi varius finibus ipsum. Mauris hendrerit nisl eu massa fermentum posuere. Cras congue dictum purus, eget iaculis orci. Nulla lacinia magna at ante facilisis rutrum. Aenean tempor arcu non enim fringilla vulputate. Nam quis vulputate ligula. Sed sit amet libero quam. Quisque bibendum porttitor velit quis consectetur. Nullam facilisis orci vel nunc commodo, eu ullamcorper dui elementum. Nunc...

CSS

.sup-container {
  background-color: #fff;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
.sup-container-right {
  transform: translate3d(100%, 0, 0);
}
.sup-container-left {
  transform: translate3d(-100%, 0, 0);
}
.sup-container-bottom {
  transform: translate3d(0, 100%, 0);
}
.sup-container-top {
  transform: translate3d(0, -100%, 0);
}

.sup-container-right.open,
.sup-container-left.open,
.sup-container-bottom.open,
.sup-container-top.open {
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s;
  z-index: 100;
}

.sup-container-right.close,
.sup-container-left.close,
.sup-container-bottom.close,
.sup-container-top.close {
  transition: transform 0.5s;
  z-index: 10;
}

JavaScript

var sup = {
	dude: function (container, type) {
  	type = typeof type !== 'undefined' ? type : 'right';
  	
    document.querySelector(container).classList.add('sup-container', 'sup-container-' + type);
  },
	yo: function (panel) {
  	var $panel = document.querySelector(panel);
    var $panels = document.querySelectorAll('.sup-container');
    for (var i = 0; i < $panels.length; i++) {
    	$panels[i].classList.remove('open');
    	$panels[i].classList.add('close');
    }
    
  	$panel.classList.add('open');
    $panel.classList.remove('close');
  },
  later: function (panel) {
  	var $panel = document.querySelector(panel);
    
  	$panel.classList.remove('open');
    $panel.classList.add('close');
  }
};

sup.dude('#sup_right');
sup.dude('#sup_right_2', 'right');
sup.dude('#sup_left', 'left');
sup.dude('#sup_bottom', 'bottom');
sup.dude('#sup_top', 'top');

document.querySelector('#btn_right').addEventListener('click', function() {
	sup.yo('#sup_right');
});
document.querySelector('#btn_right_close').addEventListener('click', function () {
	sup.later('#sup_right');
});

document.querySelector('#btn_right_2').addEventListener('click', function() {
	sup.yo('#sup_right_2');
});
document.querySelector('#btn_right_close_2').addEventListener('click', function () {
	sup.later('#sup_right_2');
});

document.querySelector('#btn_left').addEventListener('click', function() {
	sup.yo('#sup_left');
});
document.querySelector('#btn_left_close').addEventListener('click', function () {
	sup.later('#sup_left');
});

document.querySelector('#btn_bottom').addEventListener('click', function() {
	sup.yo('#sup_bottom');
});
document.querySelector('#btn_bottom_close').addEventListener('click', function () {
	sup.later('#sup_bottom');
});

document.querySelector('#btn_top').addEventListener('click', function() {
	sup.yo('#sup_top');
});
document.querySelector('#btn_top_close').addEventListener('click', function () {
	sup.later('#sup_top');
});