showing and hiding forms

showing and hiding forms

Hi all, 

this is my question: 

i've a div that contains a form, each of these elements have their own id; the structure is something like this

<div class="art-Block-body">
    <div class="art-BlockHeader">
           <div class="art-header-tag-icon">
                   <div id="register" class="t">Register</div>
           </div>
     </div>
     <div id="registerForm" class="art-BlockContent">
           <div class="art-BlockContent-body">
                  <!----form elements-->
                  <div class="cleared"></div>
          </div>
    </div>
    <div class="cleared"></div>
  </div>

I'd want that: at the first user's click on the #register div, the div #registerForm become visible, it should remains visible also when the user click the submit button within and it should disappear if the user click a second time on the #register.

I partially solved my problems with this:

 $(document).ready(function(){
    $("#registerForm").css("display","none");
        $("#register").toggle(function(){
            $("#registerForm").show("fast");
         },function(){
         $("#registerForm").hide("fast");
         }
      );
}

but i can't resolve the submit issue: whenever a user submit the form in the #loginForm div, the page refresh and the main div return invisible.

Thanks in advance for your answers