jquery - Give an element a width when display:none; -

i have little css transition want use have element slide out behind parent.

element:

#contact-form{     background: #f2f2f2;     text-align: center;     top:-20em;     display:none;     position: relative;     padding: 2em 0;     width:100%;      -webkit-transition: top 0.2s ease;     -moz-transition: top 0.2s ease;     -ms-transition: top 0.2s ease;     -o-transition: top 0.2s ease;     transition: top 0.2s ease; } 

jquery:

$('#contactbtn').click(function(){     $('#contact-form').css('top', 0).toggle('display'); }); 

as might have guessed, results in element sliding in top-left corner, rather top (because when element "display none" doesn't have width).

what's best way ensure transition targets height of element, rather width well? needs start @ top:-20 because attached navbar appears halfway down page.

you try

$("#contact-form").slidetoggle(); 

perhaps example help: http://jsfiddle.net/djs4g/