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> |
