<script type="text/javascript">
$(function(){
$("#accordion").accordion({
header : "h5",
collapsible :true,
animated : 'bounceslide' ,
autoHeight : false,
active:6
});
});
</script>

headerでは、メニューバーになる要素を選びます。ここでは、h5をメニューバーにしています。
collapsibleは、trueにすると表示しているアコーディオンの文章を、メニューバーのクリックで畳んで非表示にできる。初期設定ではfalse。
animatedでは、追加で別のアニメーションをつけることができる。
今回のboundeslideでは、メニューバーが下に移動するときバウンドさせている。
autoHeight、trueではアコーディオン内の文章の高さで一番大きい高さに全て合わせられる。
falseでは枠内のそれぞれの文章の高さにあわせらる。初期設定はtrue。
activeでは、最初に表示させる文章を選ぶことができる。
この場合1だとアコーディオン1、2だとアコーディオン2、3だとアコーディオン3、それ以上の数字を入れるとメニューが全て閉じた状態になる。デザインの微調整はCSSで。
※ こちら、のサイトを参考にさせていただきました。http://www.geekzshu.com/jquery/975#

IE7-IE9OK

モダンブラウザOK

CSS3のみで書かれた垂直タイプアコーディオンである。
a要素の仕組みを利用している。タブのheightを定め、overflow: hidden;でパネルの中身を閉じさせている。動作（アニメーション）はスタイルシートの「transition」で滑らかに動くように設定する。

IE7-パネル閉じたまま

IE8-IE9---transition効果はないがまぁOK

モダンブラウザOK。

ただし%指定のheightはブラウザによって変わるので注意