title: Show/Hide div element with one button
body: <p>I have recently been diving into jquery and loved how you could show/hide elements when an event is triggered. I tried adding a simple feature to my test website that will show Login Form when the login button is clicked and then hide the form if the button is clicked again, however; the jquery function I am using only works once (when I click the button and display the form) but after the form is displayed if I try to click the button again nothing happens. </p>
  
  <p>Jquery Code:</p>
  
  <pre><code>function displayLoginBox(){
  
  
  if ($("#login_Box_Div:hidden")){
  
          $("#login_Box_Div").show();
          $("#buttonLogin").css('color', '#FF0');
  
  }
  else if($("#login_Box_Div:visible")){
  
          $("#login_Box_Div").hide(); 
          $("#buttonLogin").css('color','white');
  }
  }
  </code></pre>
  
  <p>HTML button code: </p>
  
  <pre><code>&lt;h3&gt; &lt;a href= "#"&gt;Pictio  &lt;/a&gt; &lt;button id = "buttonLogin" onclick = "displayLoginBox()"&gt;LogIn&lt;/button&gt;&lt;/h3&gt;
  </code></pre>
  
  <p>HTML div code:</p>
  
  <pre><code>&lt;div id = "login_Box_Div"&gt; 
          &lt;form name = "myform" &gt; 
              &lt;input type = "text" name = "username" placeholder = "Username"  /&gt;
              &lt;input type = "password" name = "password" placeholder= "Password" /&gt;
              &lt;input type = "submit" id = "submitLogin" /&gt;
          &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a feeling that the jquery script only runs once and then is finished, but I could be wrong. </p>