So I am working on a html slide out to move a form off screen while it is not needed. So far I have it sliding out while the mouse is over it. I would like to change it over to a toggle of some sort in the future.

HTML Code:

<div id="navigation">
    <div class="home">
        <div id="foo">
            <img id="toggleTab" src="images/show.gif">
            <table>
                <tr>
                    <td collspan="2">Test form</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td><input type="text" id="test" name="test"></td>
                </tr>
                <tr>
                    <td>Start date:</td>
                    <td><input type="date" id="test" name="test"></td>
                </tr>
                <tr>
                    <td>End date:</td>
                    <td><input type="date" id="test2" name="test2"></td>
                </tr>
            </table>
        </div>
    </div>
</div>

Javascript/Jquery Code:

$(function() {
    $('#navigation #foo').parent().stop().animate({'marginLeft':'-229px'},200);

    $('#navigation > .home').hover(
        function () {
            $('#foo',$(this)).parent().stop().animate({'marginLeft':'0px'},200);
        },
        function () {
            $('#foo',$(this)).parent().stop().animate({'marginLeft':'-229px'},20
        }
    );
});

And the CSS:

body
{
        padding:0px;
        margin:0px;
}

#navigation
{
        position:fixed;
        top:0px;
        left:0px;
        width:0px;
        outline:1px dotted red;
        z-index:100;
}

.home
{
        position:absolute;
}

#toggleTab
{
        position:absolute;
        top:0px;
        left:229px;
        z-index:99;
}

table
{
        background-color:#CCCCCC;
        z-index:100;
}

td
{
        white-space:nowrap;
}