Monday, July 29, 2013

Show/hide left panel using Javascript

To show or hide a left panel, you need to keep an element (the left panel) with its CSS to be display:none so that we can make it appear to slide in from the left.

Let's assume that the ID of the left panel is #left-panel. You need the following code to make it slide from the left.

function showHideLeftPanel()
         { direction: "left"  }, 500);

You can customize the duration and direction of the toggle and I hope it is self explanatory from the above code. The function can be called on click, on load, etc. and it automatically toggles the state of the element.

You can read more on this here.