JSFiddle - React, Tailwind, and code Playground

by anilkamath87

HTML

<div id="test" class="intentholder">
    <input type="button" class="btn new-intent" value="Loyalty Intent 1"/>
             <input type="button" class="btn new-intent" value="Loyalty Intent 1"/>
 <input type="button" class="btn new-intent" value="Loyalty Intent 1"/>
    
    </div>
    <div id="main" class="intentholder">
    <input type="button" class="btn new-intent" value="Hotel"/>
             <input type="button" class="btn new-intent" value="Account"/>
 <input type="button" class="btn new-intent" value="Loyalty"/>
    
    </div>

CSS

.btn.new-intent {
width: 180px;
text-align: center;
    display:block;
}

.btn, .btn:visited {
color: #fff;
background: #006227;
border: 1px solid #006227;
padding: 2px 10px;
font-weight: bold;
cursor: pointer;
line-height: 18px;
text-decoration: none;
}

.intentholder {
display: block;
background-color: white;
border: 1px solid #ffa500;
padding: 5px;
    width: 180px;
}
#main {
    -moz-box-shadow:0px 0px 8px #333333;
    -webkit-box-shadow:0px 0px 8px #333333;
    box-shadow:0px 0px 8px #333333;
     position:fixed;
    
}
#test {
    background: #fff;
    display:none;
    position:fixed;
}

JavaScript

$(document).ready(function(){
     $("input").click(function(e){
            e.preventDefault();
            displayToggle();  
        });
});


var displayToggled = false;

var hideoptions = {  "direction" : "right",  "mode" : "hide"};
var showoptions = { "direction" : "left", "mode" : "show"}

function displayToggle(){

    if (displayToggled){    
        $("#test").effect( "slide", hideoptions, 1000) 
        $("#main").effect( "slide", showoptions, 1000);
        displayToggled = false;
    } else {
        $("#main").effect( "slide", hideoptions, 1000) 
        $("#test").effect( "slide", showoptions, 1000);
        displayToggled = true;
    }

}