Sidebar Animate

by envira

HTML

<a id="menu-trigger">Toggle</a>
    
<div id="page-sidebar">This is a sidebar</div>
<div id="page-content">
    This is content
</div>

CSS

#page-sidebar 	{width: 230px; float:left}
#page-content 	{margin-left: 230px; transition: margin 0.3s ease;}


#page-content.hidebar 	{
	
	margin-left: 0;
}

/* Style*/

#page-content{background:#ddd}
#page-sidebar{background:#aaa}

#menu-trigger {display:block}
.hide {display:none}

JavaScript

$("a#menu-trigger").click(function () {
    $("#page-sidebar").toggle(".3s");
    $("#page-content").toggleClass("hidebar");
});