Help with simple slide down animation for login box


I am trying to add a simple slide down login effect for my panel.

At the moment it is simply a button that when clicked makes a form appear for logging in. I would like to make it slide down / bounce or do something a bit slicker.

Here is the login.js file that is called:

$(function() {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
    button.mouseup(function(login) {
    form.mouseup(function() { 
        return false;
    $(this).mouseup(function(login) {
        if(!($('#loginButton').length > 0)) {

I tried adding this in:


But it would only slide down for a split second and then disappear.


            <div id="loginContainer">
                <a href="#" id="loginButton"><span>Customer Login</span><em></em></a>
                <div style="clear:both"></div>
                        <div id="loginBox">                
                            <form id="loginForm" form name="login_form" method="post" action="download/log.php?action=login">
                                <fieldset id="body">
                                        <label for="user">Username</label>
                                        <input type="text" name="user" id="user" autofocus="true" />
                                        <label for="password">Password</label>
                                        <input type="password" name="pwd" id="password" placeholder="Type Here" />
                                    <input type="submit" name="submit" id="login" value="Sign in" />
                                <span><a href="mailto:#">Forgot your password?</a></span>

Any help much appreciated.

Hi there.

Replacing box.toggle(); with box.slideToggle('slow'); will make the form slide down or up as the case may be.
Is this what you were trying to achieve?

That’s the very thing.

Thanks :smiley: