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

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -