Currently, I am working on implementing a jquery slide tab feature. The functionality is working fine on button click. However, I want the button to stick with the panel and slide along with it. At the moment, the button remains fixed while the panel slides as expected.
Here Is FIDDLE
HTML
<button id="showmenu" type="button" class="feed_btn">Feed Back</button>
<div class="sidebarmenu">
<div class="slide-out-div" style="z-index: 999;">
<form class="generalForm bookingForm" action="#" method="post">
<div class="row">
<div class="col-sm-12">
<label>Name<span>*</span></label>
<input type="text" name="Name" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Email <span>*</span></label>
<input type="text" name="Email" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Contact No <span>*</span></label>
<input type="text" name="contact_no" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Say Few Words<span>*</span></label>
<input type="text" name="feedback" class="required" />
</div>
<div class="col-sm-12">
<input type="submit" name="submit" value="Submit" style="background-image:none; padding-left:20px;" />
</div>
</div>
</form>
</div>
</div>
</div>
CSS
.sidebarmenu{
position:absolute;
right:-250px;
z-index:999999;
}
JS
$('#showmenu').click(function() {
var hidden = $('.sidebarmenu').data('hidden');
if(hidden){
$('.sidebarmenu').animate({
right: '-250px'
},500)
} else {
$('.sidebarmenu').animate({
right: '0px'
},500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);
});