CODEWITHSUNDEEP
javascriptjqueryjquery-animatesidebar
Guy Lepage
Guy Lepage

Reputation: 95

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.

Upvotes: 1

Views: 5504

Answers (1)

Guy Lepage
Guy Lepage

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

Related Questions