Sidebar Panel Toggle Switch

HTML

<div id="map">
        <div id="switch">Content</div>
        <div id="list">Map</div>
    </div>
    <div id="viewer"></div>

CSS

#map, #viewer{
    position: absolute;
    }


#map {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #000;
    z-index:100;
}
#list {
    margin-top: -35px;
    background-color: #FFFFFF;
    width: 195px;
    overflow: scroll;
    height: 100%;
    padding-left: 5px;
}
#switch {
    height: 35px;
    width: 35px;
    left: 200px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
}
#viewer {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
    border: solid 4px #3399FF;
}

JavaScript

$('#switch').toggle(
function() {
    $('#viewer').animate({left: 5});
    $('#list').animate({"width": 0});
    $('#map').animate({"width": 0});
    $('#switch').animate({"left": 5});
}, function() {
    $('#switch').animate({"left": 200});
    $('#map').animate({"width": 200});
    $('#list').animate({"width": 195});
    $('#viewer').animate({left: 200});
})