JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="vpp-legend-hldr">
<div id="vpp-legend-btn">toggle the div</div>
<div id="vpp-toggle" style="display:none;">test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>
</div>

CSS

.vpp-legend-hldr{
  width: 100%;
  top: 50%;
  position:absolute;
 right: 0;
}

#vpp-toggle {
  width: 100%;
    background: #ccc;
    border: 1px solid #000;
    position:absolute;
    right:0;
    z-index:99;
  }
  
  #vpp-legend-btn{
    background-color: #fff;
    border: #333 solid 1px;
        position:absolute;
    right:0;
    z-index:9999;
    cursor: pointer;
  }

JavaScript

$( "#vpp-legend-btn" ).click(function() {
  $('#vpp-toggle').toggle(500);
});