JQuery slidetoggle

Question

I am currently building a website for an indie game development team I am working with.

Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.

When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.

I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.

The code below handles the click event,

    <a href="#" >
      <div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
    </a>

And this is the div I want to be hidden and re-appear

<div id="formContainer" class="form container">
        <div id="showForm" class="outer">
            <div class="inner">
                <form method="post" action="verify.php">
                    <table>
                        <tr>
                            <td class="intro">
                                <h1 class="header-orange">Liberico Alpha Application</h1>
                                <p class="body-text">So you think you have what it takes to brave the battlefield?
                                </p>
                            </td>
                        </tr>

                    </table>
                </form>
            </div>
      </div>
</div>

I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.

Answer 1

Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:

<a class="clickable" href="#" >
          <div  id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
        </a>

And then, i've created a custom javascript toggle function with slideDown and up:

$('.clickable').click(function(){    
    var showFormObj = $('#showForm');

    if(showFormObj.hasClass('active')){
        showFormObj.removeClass('active');
        showFormObj.slideUp();
    }else{
        showFormObj.addClass('active');
        showFormObj.slideDown();
    }

});

On the css part i hid the 'showForm' element:

#showForm {display:none;}

Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/

Answer 2

If you need to hide the form when page loads. For form container use

display : none

Eg:

http://jsfiddle.net/54EUC/1/