title: How to make element slide down from display:none?
body: <p>I have an html tag, "loginBox" (<code>&lt;loginBox&gt; ... &lt;/loginBox&gt;</code>) that drops down when a user selects an option. However, before that it is hidden with <code>display:none</code>. How can I make it drop down, considering that before I do that I have to declare it <code>display:block</code> and it will fully appear? The present code has it just appear and disappear, and it would look better with a slide-down effect. </p>
  
  <p><strong>The CSS</strong></p>
  
  <pre><code>loginBox {
    background:#424242;
    font-size:16px;
    color:#DEDEDE;
    line-height:25px;
    width:335px;
    padding:15px;
    padding-left:50px;
    margin-top: 9px;
    padding-bottom:25px;
    overflow-y:hidden;
    display:block; 
  }
  
  .collapse { 
    display:none; 
  }
  </code></pre>
  
  <p><strong>The Javascript/jQuery</strong></p>
  
  <pre><code>($(this).hasClass('selected')) {  // the element that needs to be selected
            $("loginBox").addClass('collapse')
           } else { /*select*/ 
            $("loginBox").removeClass("collapse"); 
          }
  </code></pre>