JQuery show and hide div on mouse click animate

Question

This is my HTML code    lt div id  showmenu  gt Click Here lt  div gt   lt div class  menu  style  display  none   gt       lt ul gt           lt li gt Button1 lt  li gt           lt li gt Button2 lt  li gt           lt li gt Button3 lt  li gt       lt  ul gt   lt  div gt    And I want to show  menu on click on  showmenu sliding from left to right  with animate   On click again on  showmenu or anywhere in site page   menu will hide  slide back to left    I use JQuery 2 0 3  I ve tried this  but it doesn t do what I want     document  ready function             showmenu   toggle          function                     menu   slideDown  fast                       function                     menu   slideUp  fast

User · Answer

lt script type  text javascript  src  jquery-1 9 1 min js  gt  lt  script gt   lt script type  text javascript  gt        document  ready function                click-header   click function                  this  next   hidden-content   slideToggle  slow                  this  toggleClass  expanded-header                         lt  script gt       demo-container       margin 0 auto      width  600px      text-align center     click-header       padding  5px 10px 5px 60px      background  url images arrow-down png  no-repeat 50  50      expanded-header       padding  5px 10px 5px 60px      background  url images arrow-up png  no-repeat 50  50      hidden-content       display none      border  1px solid  d7dbd8      padding  20px      text-align  center         lt div class  demo-container  gt       lt div class  click-header  gt  amp nbsp  lt  div gt       lt div class  hidden-content  gt Lorem Ipsum  lt  div gt   lt  div gt

User · Answer

That  toggle   method was removed from jQuery in version 1 9  You can do this instead     document  ready function             showmenu   click function                     menu   slideToggle  fast                  Demo  http   jsfiddle net APA2S 1      but as with the code in your question that would slide up or down  To slide left or right you can do the following     document  ready function             showmenu   click function                  menu   toggle  slide                  Demo  http   jsfiddle net APA2S 2   Noting that this requires jQuery-UI s slide effect  but you added that tag to your question so I assume that is OK

User · Answer

Of course slideDown and slideUp don t do what you want  you said you want it to be left right  not top down   If your edit to your question adding the jquery-ui tag means you re using jQuery UI  I d go with nnnnnn s solution  using jQuery UI s slide effect   If not   Assuming the menu starts out visible  edit  oops  I see that isn t a valid assumption  see note below   if you want it to slide out to the left and then later slide back in from the left  you could do this  Live Example   Live Source    document  ready function            Hide menu once we know its width         showmenu   click function             var  menu       menu            if   menu is   visible                     Slide away              menu animate  left  -  menu outerWidth     10    function                      menu hide                                      else                  Slide in              menu show   animate  left  0                            You ll need to put position  relative on the menu element   Note that I replaced your toggle with click  because that form of toggle was removed from jQuery     If you want the menu to start out hidden  you can adjust the above  You want to know the element s width  basically  when putting it off-page   This version doesn t care whether the menu is initially-visible or not  Live Copy   Live Source   lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  http   ajax googleapis com ajax libs jquery 1 10 1 jquery min js  gt  lt  script gt   lt meta charset utf-8   gt   lt title gt JS Bin lt  title gt   lt  head gt   lt body gt   lt div id  showmenu  gt Click Here lt  div gt   lt div class  menu  style  display  none  position  relative   gt  lt ul gt  lt li gt Button1 lt  li gt  lt li gt Button2 lt  li gt  lt li gt Button3 lt  li gt  lt  ul gt  lt  div gt     lt script gt        document  ready function             var first   true              Hide menu once we know its width             showmenu   click function                 var  menu       menu                if   menu is   visible                         Slide away                  menu animate  left  -  menu outerWidth     10    function                          menu hide                                                  else                      Slide in                  menu show   css  left   -  menu outerWidth     10   animate  left  0                                         lt  script gt   lt  body gt   lt  html gt

User · Answer

I would do something like this  DEMO in JsBin  http   jsbin com ofiqur 1      lt a href     id  showmenu  gt Click Here lt  a gt     lt div class  menu  gt       lt ul gt         lt li gt  lt a href     gt Button 1 lt  a gt  lt  li gt         lt li gt  lt a href     gt Button 2 lt  a gt  lt  li gt         lt li gt  lt a href     gt Button 3 lt  a gt  lt  li gt       lt  ul gt     lt  div gt    and in jQuery as simple as  var min    -100px      remember to set in css the same value     max    0px      function           showmenu   click function          if     menu   css  marginLeft      min     is it left            menu   animate   marginLeft  max        move right     else           menu   animate   marginLeft  min        move left

User · Answer

Use slideToggle 500  function with a duration in milliseconds for getting a better effect  Sample Html  lt body gt       lt div class  quot growth-step js--growth-step quot  gt           lt div class  quot step-title quot  gt               lt div class  quot num quot  gt 2  lt  div gt               lt h3 gt How Can Aria Help Your Business lt  h3 gt           lt  div gt           lt div class  quot step-details  quot  gt               lt p gt At Aria solutions  we   ve taken the consultancy concept one step further by offering a full service                 management organization with expertise   lt  p gt           lt  div gt       lt  div gt       lt div class  quot growth-step js--growth-step quot  gt           lt div class  quot step-title quot  gt               lt div class  quot num quot  gt 3  lt  div gt               lt h3 gt How Can Aria Help Your Business lt  h3 gt           lt  div gt           lt div class  quot step-details quot  gt               lt p gt At Aria solutions  we   ve taken the consultancy concept one step further by offering a full service                 management organization with expertise   lt  p gt           lt  div gt       lt  div gt   lt  body gt   In your js file  if you need child propagation for the animation then remove the second click event function and its codes    document  ready function           quot  js--growth-step quot   click function event            this  children  quot  step-details quot   slideToggle 500            return false            for stoping child to manipulate the animation        quot  js--growth-step  step-details quot   click function event            event stopPropagation

User · Answer

Try this    lt script type  text javascript  gt    fn toggleFuncs   function         var functions   Array prototype slice call arguments        this   this click function            var i    this data  func count      0          functions i functions length              this data  func count   i 1                 showmenu   toggleFuncs          function                     menu    toggle   drop                                function                          menu    toggle   drop                         lt  script gt    First fuction is an alternative to JQuery deprecated toggle      Works good with JQuery 2 0 3 and JQuery UI 1 10 3

[javascript] JQuery show and hide div on mouse click (animate)

Examples related to javascript

Examples related to jquery

Examples related to jquery-ui

Examples related to jquery-effects