expanding menu, how to have smooth slide/expand?

[mermor]

hello,

I use this http://www.tutorio.com/tutorial/javascript-expanding-menu and works fine,
so I want to have smooth slide/expand.

<script type="text/javascript">
document.getElementById('menul').style.listStyle="none";
document.getElementById('men1').style.display="none"; // collapse list
document.getElementById('men2').style.display="none";
document.getElementById('men3').style.display="none";
document.getElementById('men4').style.display="none";
document.getElementById('men5').style.display="none";
document.getElementById('men6').style.display="none";
document.getElementById('men7').style.display="none";
document.getElementById('men8').style.display="none";
document.getElementById('men9').style.display="none";
document.getElementById('men10').style.display="none";
document.getElementById('men11').style.display="none";
document.getElementById('men12').style.display="none";
document.getElementById('men13').style.display="none";
function toggle(list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
}
else{ listElementStyle.display="none";
}
} </script>

how can i do this?
thanks