JSFiddle - React, Tailwind, and code Playground

by bob_js

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="container">
  <i class="glyphicon glyphicon-plus-sign cd-btn"></i>
</div>
<div class="cd-panel from-right"> 
			<header class="cd-panel-header">
				<a href="#0" class="cd-panel-close"></a>
			</header>
			<div class="cd-panel-container">
        Content
  </div>
</div>

CSS

.glyphicon-plus-sign, .glyphicon-minus-sign{
  top: 30%;
	position: absolute !important;
	z-index: 1;	
	color: rgb(255, 133, 102);
	background-color: #fff;
	border-radius: 50%;
	border: 1px solid #fff;
	cursor: pointer;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.glyphicon-plus-sign:hover, .glyphicon-minus-sign:hover {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*::after, *::before {
  content: '';
}

a {
  color: #89ba2c;
  text-decoration: none;
}
.cd-main-content {
  text-align: center;
}
.cd-main-content .cd-btn {
  position: relative;
  display: inline-block;
  background-color: #89ba2c;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}

.cd-main-content .cd-btn-val {
  position: relative;
  display: inline-block;
  background-color: #89ba2c;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn-val:hover {
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px...

JavaScript

$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
    $(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});

//NVV
jQuery(function($){
	//open the lateral panel
	$('.cd-btn').on('click', function(event){
		event.preventDefault();
		$('.cd-panel').addClass('is-visible');
	});
	//close the lateral panel
	$('.cd-panel').on('click', function(event){
		if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
			$('.cd-panel').removeClass('is-visible');
			event.preventDefault();
		}
	});
});