Minimizable side panel in html

Question

I'm looking for a simple javascript to create side panel with hiding after some action(ex. after clicking on some area). Something like this example but appearing from left side not from up to down as the example works. Will be appreciated for any help :)

Answer 1

You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this. First download émile It's a very simple javascript animation framework.

Since you didn't provide any HTML markup, I'm assuming you have something like this.

<div id="side-panel">panel content..</div>
<div id="content">main content..</div>

and let's say your side-panel element has a CSS style of width:200px . Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"

Here is the content of the togglePanel function:

function togglePanel(){
    var panel = document.getElementById('side-panel');
    if(!panel.__closed){
        emile(panel, 'width:0px');
        panel.__closed = true;
    }else{
        emile(panel, 'width:200px');
        panel.__closed = false;
    }
}

If you check the documentation of the emile framework you can do lot's of other cool things.

Answer 2

as you haven't provided us your code (which you have build) that's why I'm just giving a code to help you (And I don't know that this is a right answer or not). This code needs jQuery Ver.1.4 at least I think so, but I'm not clear. Anyways let's get started. Here is a link to live demo .

Hope this helps!