javascript - Jquery Slide Toggle : Slide Button with Panel -
i working on jquery slide tab , working fine on button click. want button stitch panel , should slide panel. button fix , panel working expected.
here 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); });
as want move button along form, need add 1 parent , move instead form see demo
html
<div class="panel"> <button id="showmenu" type="button" class="feed_btn">feed back</button> <div class="sidebarmenu"> -- code --</div> </div>
js
$('#showmenu').click(function () { var hidden = $('.sidebarmenu').data('hidden'); if (hidden) { $('.panel').animate({ marginright: '-250px' }, 500) } else { $('.panel').animate({ marginright: '0px' }, 500) } $('.sidebarmenu,.image').data("hidden", !hidden); });
Comments
Post a Comment