Jquery Sliding Side Bar Right To Left With Resizing Content

I am trying to create a side bar with the appearance similar to the following image. http://i.imgur.com/AkFeEoh.png As you can see in the image, I want a sidebar that is by default

Solution 1:

required result with responsive design

HTML

<divclass=" sidebar-at-left"id="main"><divid="content">Content</div><divid="sidebar">Sidebar</div><ahref="#"id="separator"></a><divclass="clearer">&nbsp;</div></div>

CSS

#content,#sidebar {
    line-height: 300px;
    text-align: center;
    border: 1px solid;
}

#sidebar {
    background-color: #DEF;
    border-color: #BCD;
    display: none;
}
#content {
    background-color: #EFE;
    border-color: #CDC;
    width: 97%;
}

.use-sidebar#content {width: 64%;}
.use-sidebar#sidebar {
    display: block;
    width: 32%;
}

.sidebar-at-left#sidebar {margin-right: 1%;}
.sidebar-at-right#sidebar {margin-left: 1%;}

.sidebar-at-left#content, .use-sidebar.sidebar-at-right#sidebar, .sidebar-at-right#separator {float: right;}
.sidebar-at-right#content, .use-sidebar.sidebar-at-left#sidebar, .sidebar-at-left#separator {float: left;}

#separator {
    background-color: #000;
    border: 1px solid #CCC;
    display: block;
    outline: none;
    width: 1%;
    margin-top: 145px;
}
.use-sidebar#separator {
    background: #000;
    border-color: #FFF;
    width:1%;
}
#separator:hover {
    border-color: #ABC;
    background: #DEF;
}

jQuery

<script>
$(document).ready(function(){
    // Variablesvar objMain = $('#main');

    // Show sidebarfunctionshowSidebar(){
        objMain.addClass('use-sidebar');
    }

    // Hide sidebarfunctionhideSidebar(){
        objMain.removeClass('use-sidebar');
    }

    // Sidebar separatorvar objSeparator = $('#separator');

    objSeparator.click(function(e){
        e.preventDefault();
        if ( objMain.hasClass('use-sidebar') ){
            hideSidebar();
        }
        else {
            showSidebar();
        }
    }).css('height', objSeparator.parent().outerHeight() + 'px');

});
</script>

DEMO