jQueryによるアコーディオンパネル

<ul>
    <li class="pref"><a href="#">miyagi</a></li>
    <li class="city"><a href="#">sendai</a></li>
    <li class="city"><a href="#">kesennuma</a></li>
    <li class="city"><a href="#">ishinomaki</a></li>
    <li class="city"><a href="#">onagawa</a></li>
    <li class="pref"><a href="#">iwate</a></li>
    <li class="city"><a href="#">miyako</a></li>
    <li class="city"><a href="#">rikuzentakada</a></li>
    <li class="pref"><a href="#">fukushima</a></li>
    <li class="city"><a href="#">souma</a></li>
</ul>

$("li.pref").click(accordion); // (1)

function accordion(e) {
    var $this = $(this);
    if (!$this.hasClass("opened")) { // (2)
        $("li.opened").removeClass("opened").nextUntil(".pref").slideUp(); // (3)
        $this.addClass("opened").nextUntil(".pref").slideDown(); // (4)
    } else { // (5)
        $this.removeClass("opened").nextUntil(".pref").slideUp(); // (6)
    }
    e.preventDefault(); // (7)
}

(1)：「pref」クラスを持つli要素がクリックされると、accordion関数が実行される。
(2)：クリックされたli要素が「opened」クラスを持っていなければ、
(3)：「opened」クラスを持つli要素から「opened」クラスを取り除き、このli要素と次に現れる「pref」クラスを持つli要素との間にあるli要素をslideUpする。
(4)：クリックされたli要素に「opened」クラスをつけ、このli要素と次に現れる「pref」クラスを持つli要素との間にあるli要素をslideDownする。
(5)：クリックされたli要素が「opened」クラスを持っていれば、
(6)：クリックされたli要素から「opened」クラスを取り除き、このli要素と次に現れる「pref」クラスを持つli要素との間にあるli要素をslideUpする。
(7)：li直下にあるa要素にデフォルトでセットされているイベント（他ページへのジャンプ）を実行させない。