JSFiddle - React, Tailwind, and code Playground

by Luca Detomi

HTML

<div class="jq-collapsed-toolbar_container top left horizontal">
  <a href="#!" class="jq-collapsed-toolbar-toggle">X</a>
  <ul class="jq-collapsed-toolbar">
    <li><a href="#!" title="Close">Close</a>
    </li>    
    <li><a href="#!" title="Save">Save</a>
    </li>
    <li><a href="#!" title="Save As">Save As</a>
    </li>
  </ul> 
</div>

CSS

ul {margin:0}

.jq-collapsed-toolbar_container {
	position:absolute;
	text-align:left;
  border:solid 1px red;
}
.jq-collapsed-toolbar_container .jq-collapsed-toolbar-toggle {
	display:inline-block;
	width:30px;
	height:30px;
	background:rgba(0,0,0,0.7);
	color:#fff;
	border-radius:50%;
	transition:all .4s ease-in-out;
}
.jq-collapsed-toolbar_container .jq-collapsed-toolbar-toggle:hover {
	background:#000
}
.jq-collapsed-toolbar_container .jq-collapsed-toolbar-toggle.active:before {
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg)
}
.jq-collapsed-toolbar_container .jq-collapsed-toolbar {
	list-style:none;
	padding:0;
	-webkit-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
	transition:all .4s ease-in-out;
  display:none;
}
.jq-collapsed-toolbar_container .jq-collapsed-toolbar.open {
	-webkit-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1)
}
.jq-collapsed-toolbar_container .jq-collapsed-toolbar>li {
	background:rgba(0,0,0,0.7);
	color:#fff;
	padding:3px 7px 4px;
	border-bottom:solid 1px #fff;
	transition:all .6s ease-in-out
}
.jq-collapsed-toolbar_container .jq-collapsed-toolbar>li:last-of-type {
	border-bottom:none
}
.jq-collapsed-toolbar_container .jq-collapsed-toolbar>li:hover {
	background:#000
}
.jq-collapsed-toolbar_container .jq-collapsed-toolbar>li a {
	color:#fff;
}

.jq-collapsed-toolbar_container.top {
	top:5px
}
.jq-collapsed-toolbar_container.bottom {
	bottom:5px
}
.jq-collapsed-toolbar_container.left {
	left:5px
}
.jq-collapsed-toolbar_container.left .jq-collapsed-toolbar-toggle.active {
	border-top-right-radius:0;
	border-bottom-right-radius:0
}
.jq-collapsed-toolbar_container.left .jq-collapsed-toolbar {
	float:right;
	-webkit-transform-origin:0 15px;
	-ms-transform-origin:0 15px;
	transform-origin:0 15px
}
.jq-collapsed-toolbar_container.left .jq-collapsed-toolbar>li:first-of-type {
	border-top-right-radius:7px
}
.jq-collapsed-toolbar_container.left...

JavaScript

$('.jq-collapsed-toolbar-toggle').on("click",function(){
	var toggle = $(this);
    var container = $(this).parent('.jq-collapsed-toolbar_container');  
    var target = $(container).find('.jq-collapsed-toolbar');
  
    $(toggle).toggleClass('active');
    
    if( !$(target).hasClass('open') )
    {
    	$(target).show().addClass('open');
    }
    else
    {
    	$(target).removeClass('open').on('transitionend',function(e){
          $(target).hide();
      });
    }
});