jquery toggle slide from left to right and back

Question

I have a  Menu  button on the left hand side of the page and once selected I have a div containing the menu items show   I then have another button that can be selected to hide the menu   Ideally I want this to slide out  from left to right  and back but have been unsuccessful in getting this working well  I have tried using animate and SlideToggle but none work well for what I have  Any tips    lt div id  cat icon  gt Menu lt  div gt   lt div id  categories  gt       lt div CLASS  panel title  gt Menu lt  div gt       lt div CLASS  panel item  gt           lt template UserControl id  ucCategories  src  UserControls ProductCategories ascx    gt       lt  div gt   lt  div gt        cat icon   click function              categories   toggle            cat icon   hide            panel title   click function              categories   toggle            cat icon   show

User · Accepted Answer

See this  Demo      cat icon  panel title   click function             categories  cat icon   stop   slideToggle  slow          Update   To slide from left to right  Demo2  Note  Second one uses jquery-ui also

User · Answer

There is no such method as slideLeft   and slideRight   which looks like slideUp   and slideDown    but you can simulate these effects using jQuery   s animate   function  HTML Code   lt div class  quot text quot  gt Lorem ipsum  lt  div gt   JQuery Code      document  ready function        var DivWidth      quot  text quot   width           quot  left quot   click function             quot  text quot   animate           width  0                          quot  right quot   click function             quot  text quot   animate           width  DivWidth                          You can see an example here  How to slide toggle a DIV from Left to Right

User · Answer

Use this         cat icon   click function              categories   toggle  slow              cat icon   hide            panel title   click function              categories   toggle  slow              cat icon   show          See this Example  Greetings

User · Answer

Hide  categories initially   categories       display  none      and then  using JQuery UI  animate the Menu slowly   var duration    slow        cat icon   click function              cat icon   hide duration  function                 categories   show  slide    direction   left    duration              panel title   click function              categories   hide  slide    direction   left    duration  function                 cat icon   show duration            JSFiddle  You can use any time in milliseconds as well   var duration   2000    If you want to hide on class  panel item  too  select both panel title and panel item       panel title  panel item   click function              categories   hide  slide    direction   left    duration  function                 cat icon   show duration            JSFiddle

User · Answer

Sliding from the right       example   animate  width  toggle   350     Sliding to the left       example   toggle   direction   left     1000

[jquery] jquery toggle slide from left to right and back

Examples related to jquery

Examples related to jquery-animate

Examples related to toggle