Hide & Show Right Sidebar


So, I'm trying to create a javascript or query to hide a right sidebar div. Proving to be a lot harder than I anticipated but I'm close.

I've created a hide/show right sidebar that slides out when clicked and then slides back to full width when the button is clicked again.

Problem: When clicked "Hide": Sidebar slide out to be 'width:10px;' and the content to be margin-right:10px; When clicked "SHow": Sidebar slide in to be 'width:200px;' and the content to slide back to 'margin-right:200px;

I've created a JS Fiddle to show:

http://jsfiddle.net/6uVvF/

I am trying to accomplish an animated version of face books right sidebar. Here's also another example: http://www.sidlee.com/

Thanks.



So I was able to create a sliding and fading effect on the sidebar.

It allows me to hide a sidebar. I am having the Javascript animate each item to 0 though. But it works well.

See the working version here:

http://jsfiddle.net/glepage/6uVvF/