クリックでアニメーションしながら開閉するアコーディオン

Result

jQuery

//アクセス時の表示状態の処理
    $("p:not(:first)").css("display", "none");
    $("h3:first").addClass("select");
    //クリックイベント
    $("div h3").click(function() {
        var cont = $(this).next();
        if ($(cont).css("display") == "none") {
            //スライドエフェクト付きで表示・非表示
            $("p").slideUp("fast");
            $(cont).slideDown("fast");
            $("h3").removeClass("select");
            $(this).addClass("select");
        }
    //ホバー時にclassを与えてスタイリング
    }).hover(
    function() {
        $(this).addClass("over");
    },
    function() {
        $(this).removeClass("over");
    });

css

div{width:250px;margin:25px;}
.over ,
.select{background:yellow;}

p{background:#efefef;height:150px;}

h3{background:#f7f7f7;cursor:pointer;}

p,h3{padding:10px;}​

html

<div>
<h3>Panel 01</h3>
<p>content</p>
<h3>Panel 02</h3>
<p>content</p>
<h3>Panel 03</h3>
<p>content></p>
</div>​

via

jqueryでアコーディオンメニューを作る