How to toggle hide show sidebar div using jQuery

Question

I have 2  lt div gt s with ids A and B  div A has a fixed width  which is taken as a sidebar  The layout looks like diagram below   The styling is like below  html  body       margin  0      padding  0      border  0     A   B       position  absolute     A       top  0px      width  200px      bottom  0px     B       top  0px      left  200px      right  0      bottom  0px     I have  lt a id  quot toggle quot  gt toggle lt  a gt  which acts as a toggle button  On the toggle button click  the sidebar may hide to the left and div B should stretch to fill the empty space  On second click  the sidebar may reappear to the previous position and div B should shrink back to the previous width  How can I get this done using jQuery

User · Answer

document  ready function              trigger   click function                  sidebar   toggle  fast                sidebar   toggleClass  active            return false                 lt div gt       lt a class  trigger  href     gt           lt img id  icon-menu  alt  menu  height  50  src  Images Push Pin png  width  50    gt       lt  a gt   lt  div gt   lt div id  sidebar  gt   lt  div gt    Instead  sidebar give the id of ur div

User · Answer

You can visit w3school for the solution on this the link is here and there is another example also available that might surely help  Take a look

User · Answer

This help to hide and show the sidebar  and the content take place of the empty space left by the sidebar    lt div id  A  gt Sidebar lt  div gt   lt div id  B  gt  lt button gt toggle lt  button gt  Content here  Bla  bla  bla  lt  div gt      Toggle Hide Show sidebar slowy     document  ready function              B   click function e              e preventDefault                  A   toggle  slow                  B   toggleClass  extended-panel                        html  body       margin  0      padding  0      border  0     A   B       position  absolute     A       top  0px      width  200px      bottom  0px      background orange     B       top  0px      left  200px      right  0      bottom  0px      background green        makes the content take place of the SIDEBAR     which is empty when is hided     extended-panel     left  0px  important

User · Answer

See this fiddle for a preview and check the documentation for jquerys toggle and animate methods       toggle   toggle function            A   animate  width 0            B   animate  left 0      function            A   animate  width 200            B   animate  left 200          Basically you animate on the properties that sets the layout   A more advanced version       toggle   toggle function            A   stop true  animate  width 0            B   stop true  animate  left 0      function            A   stop true  animate  width 200            B   stop true  animate  left 200         This stops the previous animation  clears animation queue and begins the new animation

User · Answer

button   toggle  function             B   css  left    0      function             B   css  left    200px        Check working example at http   jsfiddle net hThGb 1   You can also see any animated version at http   jsfiddle net hThGb 2

User · Answer

toggle   click function           B   toggleClass  extended-panel          A   toggle     specify a time here for an animation            and in the CSS    extended-panel     left  0px  important

User · Answer

Using Javascript   x000D   x000D  var side   document querySelector   side    x000D  var main   document querySelector   main    x000D  var togg   document querySelector   toogle    x000D  var width   window innerWidth  x000D   x000D  window document addEventListener  click   function     x000D   x000D    if  side clientWidth    0    x000D        alert side clientWidth   x000D      side style width         200px   x000D      main style marginLeft    200px   x000D      main style width         width - 200     px   x000D      togg innerHTML           Min   x000D      else   x000D        alert side clientWidth   x000D      side style width         0   x000D      main style marginLeft    0   x000D      main style width        width    px       x000D      togg innerHTML           Max   x000D      x000D   x000D     false   x000D  button   x000D    width  100px  x000D    position  relative   x000D    display  block   x000D    x000D   x000D  div   x000D    position  absolute  x000D    left  0  x000D    border  3px solid  73AD21  x000D    display  inline-block  x000D    transition  0 5s   x000D    x000D   x000D   side   x000D    left  0  x000D    width  0px  x000D    background-color  red  x000D    x000D    x000D   main   x000D    width  100   x000D    background-color  white      x000D    x000D   lt button id  toogle  gt Max lt  button gt  x000D   lt div id  side  gt Sidebar lt  div gt  x000D   lt div id  main  gt Main lt  div gt  x000D   x000D   x000D

User · Answer

The following will work with new versions of jQuery     window  on  load   function         var toggle   false          button   click function             toggle    toggle           if toggle                   B   animate  left  0                      else                  B   animate  left  200

[javascript] How to toggle (hide / show) sidebar div using jQuery

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to jquery-events