CMS EDITOR - Toggle Sidebar Example

Create a simple toggle sidebar with JQuery Toggle Sidebar plugin.

by bizamajig

HTML

<section>
    <article></article>
    <aside></aside>
</section>
<button>Hide Sidebar</button>

CSS

section {
    background-color:tomato;
    overflow:hidden;
    width:400px;
    height:220px;
}
article {
    float:left;
    width:300px;
    height:200px;
    background-color:lightgreen;
}
aside {
    float:right;
    width:100px;
    height:200px;
    background-color:gold;
}

JavaScript

var asideWidth = $('aside').outerWidth();
$('button').click(function () {
    if ($('aside').is(':visible')) {
        $('aside').fadeOut("slow", function () {
            $('article').stop().animate({
                marginLeft: asideWidth/2
            }, "slow");
        });
    } else {
        $('article').stop().animate({
            marginLeft: 0
        }, "slow", function () {
            $('aside').fadeIn("slow");
        });
    }
    $(this).text($(this).text() == 'Hide Sidebar' ? 'Show Sidebar' : 'Hide Sidebar');
});