Result
http://jsfiddle.net/8aEQN/4/embedded/result,js,css,html
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>