ElementStacks

Made by Adam Schwartz (http://polymath.mit.edu) in response to a StackOverflow question: http://stackoverflow.com/questions/2807599/slideout-page-using-javascript

by adamschwartz

HTML

<body>
<div>Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents. Page contents.</div>
<div id="slideout">
    <div id="slideout_contents">
        <a href="#" id="slideout_toggle">Open</a>
        <h1>Header</h1>
        <p>Some text.</p>
        <p>Some text.</p>
    </div>
</div>
</body>

CSS

body {
    padding: 0px;
    margin: 0px;
}
#slideout, #slideout_contents, #slideout_toggle {
    background: #000; /* to see it on a blank page */
    color: #fff;
    position: absolute;
    top: 0px;
}
#slideout_contents {
    left: -100px; /* adjust these */
    width: 100px;
    height: 300px;
}
#slideout_toggle {
    display: block;
    text-decoration: none;
    top: 50%;
    left: 100px;
    width: 50px;
    text-align: center;
}

JavaScript

$('#slideout_toggle').toggle(function(){
    $(this).html('Close');
    $('#slideout_contents').animate({'left': '0px'});
},function(){
    $(this).html('Open');
    $('#slideout_contents').animate({'left': '-100px'});
});