アコーディオンは使用頻度が高いので、備忘録に。

.slideToggleで簡単アコーディオン作成

jQueryの.slideToggleというメソッドを使えば、一瞬でアコーディオンが作成できます。

HTML

ボタンはp要素、コンテンツはdiv要素にして、それぞれacc_button、acc_contentというクラスを付与しています。

<p class="acc_button">Click!</p>
<div class="acc_content">
	コンテンツ - 1
</div>

<p class="acc_button">Click!</p>
<div class="acc_content">
	コンテンツ - 2
</div>

<p class="acc_button">Click!</p>
<div class="acc_content">
	コンテンツ - 3
</div>

CSS

ボタンをクリックするまではアコーディオンを閉じておく場合、acc_contentにdisplay:none;を指定しておけばOKです。

.acc_button{
	margin: 0;
	padding: 10px 20px;
	cursor: pointer;
}
.acc_content{
	display: none;
	padding: 10px 20px;
	background: #eee;
}

JavaScript（jQuery）

acc_buttonがクリックされたら、その次に出てくるacc_contentをスライドさせる、という記述です。

$(".acc_button").click(function(){
  $(this).next(".acc_content").slideToggle();
});

実行結果

See the Pen jQuery_Accordion_1 by Leo_8192 (@Leo_8192) on CodePen.

最初のアコーディオンだけ開いておくパターン

続いては1個目のアコーディオンだけ最初から開いておくパターン。スクリプト部分は先程と共通です。

HTML

開いておきたいコンテンツにshowというクラスを付与します。

<p class="acc_button">Click!</p>
<div class="acc_content show">
	コンテンツ - 1
</div>

<p class="acc_button">Click!</p>
<div class="acc_content">
	コンテンツ - 2
</div>

<p class="acc_button">Click!</p>
<div class="acc_content">
	コンテンツ - 3
</div>

CSS

showというクラスが付与された要素のみ、display:block;に上書きします。

.acc_button{
	margin: 0;
	padding: 10px 20px;
	cursor: pointer;
}
.acc_content{
	display: none;
	padding: 10px 20px;
	background: #eee;
}
.show{
	display: block;
}

ちなみに、上書きが嫌いなら否定擬似クラスのnot:()を使ってもOKです。

.acc_button{
	margin: 0;
	padding: 10px 20px;
	cursor: pointer;
}
.acc_content{
	padding: 10px 20px;
	background: #eee;
}
.acc_content:not(.show){
	display: none;
}

実行結果

See the Pen jQuery_Accordion_1 by Leo_8192 (@Leo_8192) on CodePen.

以上です。ね？簡単でしょ？