JSFiddle - React, Tailwind, and code Playground
by LW
HTML
<div class="expand-wrapper">
<a href="#" class="expand-btn"><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact</a>
<div class="expand-form">
Contact Form
</div>
</div>
CSS
.expand-wrapper {
width: 500px;
background: red;
}
JavaScript
$(function(){
$('.expand-btn').data('clicks',false);
});
$('.expand-btn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.expand-wrapper').animate({
right: "-325px"
}, 500, function() {
});
} else {
$('.expand-wrapper').animate({
right: "0"
}, 500, function() {
});
}
$(this).data('clicks', !clicks);
});