下記がとても参考になる
参考ページ

■html部分

<div>
    <h3 class="accordion_head">アコーディオンのトリガー部分</h3>
    <p>アコーディオンする部分。</p>
</div>

■スクリプト部分

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.accordion_head').click(function() {
        $(this).next().slideToggle();
    }).next().hide();
});
</script>

■詳細
まずページを表示させるとscript部分6行目の.next().hide();が実行されます。
「トリガー(.accordion_head)の次の要素(next)を隠す(hide)」という命令ですね。
これでアコーディオンしたい部分が隠されて表示されるわけです。

次にトリガークリックで実行される部分。5行目の$(this).next().slideToggle();
このとき$(this)にはクリックしたトリガーが入っています。
「トリガー(.accordion_head)の次の要素(next)をスライド(slideToggle)する」ってことですね。
こう書いておくことで同じページに何個もアコーディオンがあっても、クリックしたトリガーだけ実行されます。
slideToggleなのでクリックで表示非表示を交互に実行します。
slideToggle()の中に’slow’（遅い）、’nomal’（普通（指定なしと同じ））、’fast’（早い）を入れるとスライドスピードも変えられます。

超シンプルなコードなので色々カスタマイズできそうですね。
（classを足して開いているアコーディオンだけ色変えたりとか、一個表示してるときは他のアコーディオンは隠すとか。。。）

■一括開閉にチャレンジ！

$('.accordion_all_head').click(function() {
   $('.accordion_head').next().slideToggle();
});

■一番最初だけ開いた状態にチャレンジ！

$('.accordion_head:first').next().show();

■つのアコーディオンを開くと他は閉まるにチャレンジ！

$(document).ready(function(){
    $('.accordion_head').click(function() {
        $('.accordion_head').next().slideUp();　//←ここ追記
        $(this).next().slideToggle();
    }).next().hide();
});

■開いているアコーディオンの色を変えるにチャレンジ！

$(document).ready(function(){
    $('.accordion_head').click(function() {
        //ここから
        if($(this).is(".selected")){
            $(this).removeClass("selected");
        }else {
            $(this).addClass("selected");
        }
        //←ここまで追記
        $(this).next().slideToggle();
    }).next().hide();
});

.selected {
    background:選択中の色;
}
.selected + * {
    background:選択中の色;
}