How to make element slide down from display:none?

I have an html tag, "loginBox" (<loginBox> ... </loginBox>) that drops down when a user selects an option. However, before that it is hidden with display:none. How can I make it drop down, considering that before I do that I have to declare it display:block and it will fully appear? The present code has it just appear and disappear, and it would look better with a slide-down effect.

The CSS

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; 
}

The Javascript/jQuery

($(this).hasClass('selected')) {  // the element that needs to be selected
          $("loginBox").addClass('collapse')
         } else { /*select*/ 
          $("loginBox").removeClass("collapse"); 
        }

Is this what you want?

FIDDLE

$(document).ready(function(){
    $("loginbox").addClass("collapse");
    $(":checkbox").change(function(){
        if($(this).is(":checked")){
        //$("loginBox").removeClass("collapse"); 
        $("loginBox").slideDown(); 
        }
        else
        {
            //$("loginBox").addClass("collapse"); 
            $("loginBox").slideUp(); 
        }
    });
});