jquery dropping down input box does not work properly
<p>I have created a small div on top of the page that contains a login text field. everything works fine excapt that when the page loads the text box shows up, however the way i want it to be is when the page loads it should not show up until i click the button bellow to drop it down. right now it works the other way round when it loads it show up and then i have to click it to close it. can some one help me solve this problem the following is my code </p>

<pre><code>//JQuery

      $(".logbtn").click(function(){ 
      $("#loginbox").slideToggle("slow");
      $(this).toggleClass("active");

    });
</code></pre>

<p>// HTML</p>

<pre><code> &lt;div id="log"&gt;

 &lt;div id="loginbox"&gt;
 &lt;form method="post" action="login.php"&gt;
   &lt;p&gt;&lt;input type="text" name="username"  value="username" id="usernamelog"/&gt;&lt;/p&gt;
   &lt;p&gt;Password: &lt;input type="password" name="password" /&gt;&lt;/p&gt;
   &lt;p&gt;&lt;input type="submit" name="login" value="Login"/&gt;&lt;/p&gt;  
 &lt;/form&gt;

 &lt;/div&gt;
 &lt;a class="logbtn"&gt;Login&lt;/a&gt;

 &lt;/div&gt;
</code></pre>

<p>//CSS</p>

<pre><code>div#log{
width:301px;
position:absolute;
margin-top:0px;
margin-left:650px;
}


div#loginbox{
width:300px;
background-color:#efebee;
padding-left:10px;
top:2px;
padding-bottom:10px;
border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
}


.logbtn{
 width:200px;
 background-color:black;
 padding:7px 30px;
}
</code></pre>
