Этот пример уже неоднократно бродил по просторам интернета. Приведу его в своём блоге:

JavaScript:

button.onclick = function (){
var className = informer.className;
if( className.indexOf(' expanded') == -1 ){
className += ' expanded';
}
else {
className = className.replace(' expanded', '');
}
informer.className = className;
return false;
};

CSS:

.b-toggle {
opacity: 0;
max-height: 0;
overflow: hidden;
-moz-transition: opacity .3s, max-height .3s;
-ms-transition: opacity .3s, max-height .3s;
transition: opacity .3s, max-height .3s;
_display: none;
}
.expanded {
max-height: 100px;
opacity: 1;
_display: block;
}

HTML:

<div id="reg">
<a id="button" href="#"> Регистрация</a>
<div id="informer" class="b-toggle">
<form>
<div><input/></div>
<button/>
</form>
</div>
text
</div>

Пример