Reputation: 95
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:
I am trying to accomplish an animated version of face books right sidebar. Here's also another example: http://www.sidlee.com/
Thanks.
Upvotes: 1
Views: 5504
Reputation: 95
The following is an older but still working Javascript & JQuery toggle.
The toggler hides the sidebar.
$('#toggle').toggle(function() {
$('#right-sidebar').animate({
width: "10px",
backgroundColor: "#000000"
}, 400);
}, function() {
$('#right-sidebar').animate({
width: "200px",
backgroundColor: "#ffffff"
}, 400);
});
See a working version here:
http://jsfiddle.net/glepage/6uVvF/
Upvotes: 1