JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<div class="Click">Click</div>
<div class="outerBlock">
<div class="innerBlock">
    <span>Branch</span>
    <span>Branch</span>
    <span>Branch</span>
</div>
</div>

CSS

.Click{
  float:left;
  position:absolute;
  z-index:100;
  background-color:#fff;
}
.outerBlock{
  position:relative;
  margin-left: 36px;
  }
.innerBlock{
  float:left;
position: absolute;
    left: 0;
    transition: all .3s ease .1s;
    opacity: 1;
    z-index:1;
}
.innerBlock.active{
  left: -172px;
    transition: all .3s ease .1s;
    opacity: 0;
}

JavaScript

$(document).ready(function () {

        $(".Click").click(
            function () {
                $('.innerBlock').toggleClass('active');
            }            
        );
    });