jQuery の animate の縦方向の出現や隠す動作は、height に、show、hide、toggle などを指定することで可能。
指定方法
animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の height: *** に指定する。
toggle
toggle を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動きながら出現。速度( duration )は、slow を指定してある。
show
show を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動きながら出現。速度( duration )は、slow を指定してある。
出現させるブロックを、CSS で、非表示（display: none;）にしておき、jQuery の animate でそれを出現させる。
hide
hide を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動きながら消える。速度( duration )は、slow を指定してある。
応用
opacity と併用することで、透明にしながら折りたたむことも可能。
赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動き、さらに、透明になりながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動き不透明になりながら出現。速度( duration )は、slow を指定してある。