drawer slide in from right

by ian_smithz

HTML

<div id="container">
    <p>Click on the slider!</p>
    <div id="drawer">
        <div id="drawer-handle"></div>
        <div id="drawer-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam tempore porro minima saepe culpa consectetur. Impedit ipsa quisquam tenetur cumque odit cum aliquam enim inventore asperiores perferendis quos quaerat.</p>
        </div>
    </div>
</div>

CSS

* {
    font-family: Helvetica;
}
#container {
    width: 400px;
    height: 300px;
    background-color: #6F0AAA;
    margin: 20px 40px;
    position: relative;
    color: white;
    padding: 20px;
}
#drawer {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    overflow-x: hidden; /* Needed for initial hidden state */
}
#drawer > div {
    height: 100%;
    border-left: 2px solid white;
    float: left;
}
#drawer-handle {
    width: 15px;
    background-color: #A2EF00;
}
#drawer-handle:after {
    content: "<";
    position: absolute;
    top: 50%;
    padding: 2px;
}
#drawer-content {
    width:         200px;
    margin-right: -200px; /* -width */
    background-color: #FFD200;
}
#drawer-content > p {
    padding: 10px;
}

JavaScript

$(document).ready(function () {
    var expanded = false;
    $("#drawer-handle").click(function () {
        if (expanded = !expanded) {
            $("#drawer-content").animate({ "margin-right": 0 },    "slow");
        } else {
            $("#drawer-content").animate({ "margin-right": -200 }, "slow");
        }
    });
});