効果は以下の図のようになります。
サンプルを読んで自分で書きましたが(自分への励ましだと思ってください!)
jquery
$(document).ready (function(){
var h3=$(".accordion h3");
$(".accordion h3:eq(0)").addClass("active");//1. 最初の取得最初の H3 タグとクラスを追加します。
$(".accordion p:gt(0)").hide();//最初の p タグを除くすべてのタグを非表示にします。
h3.click(function() {
$(this).next("p").slideToggle("slow")//アニメーションを追加する次の p タグを見つけ、その兄弟ノードが表示されているかどうかを確認します。表示されている場合は非表示にします。
.siblings("p :visible").fadeOut("slow");
$(this).toggleClass("active");// H3 タグにクラスを追加します (存在する場合、存在する場合は追加します)、兄弟ノードを見つけて削除します。 class
$(this).siblings("h3").removeClass("active");
});
css
ボディ {
マージン: 10px 自動;
幅: 570px;
フォント: 75%/120% Arial、Helvetica、サンセリフ;
。アコーディオン {
幅: 480px;
ボーダーボトム: ソリッド 1px #c4c4c4;
}
.accordion h3 {
背景: #e9e7e7 url(images/arrow-square.gif) -repeat right -51px;
パディング: 7px 15px;
フォント: 120%/100% Arial、Helvetica、サンセリフ;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
.accordion h3.アクティブ {
背景位置: 右 5px;
.accordion p {
背景: #f7f7f7;
パディング: 10px 15px
ボーダー左: ソリッド 1px #c4c4c4;
ボーダー右: ソリッド 1px #c4c4c4;
html
コードをコピー
コードは次のとおりです: