JavaScript, jQueryサンプル

Q&Aやメニューなどをアコーディオンで

実装例

Q1.コーヒーのおかわりはできますか？

Ans. おかわり1杯につき100円の追加料金でご提供しております。

Q2.ケーキセットのドリンクをブランデーに変更できますか？

Ans. 申し訳ありません。ケーキセットのドリンクはノンアルコールに限ります。ご希望の場合には、別途ケーキ単品でご注文下さい。

HTML

<dl id="faq" class="faq">
<dt class="faq_dt">Q1.コーヒーのおかわりはできますか？</dt>
<dd class="faq_dd">Ans. おかわり1杯につき100円の追加料金でご提供しております。</dd>
<dt class="faq_dt">Q2.ケーキセットのドリンクをブランデーに変更できますか？</dt>
<dd class="faq_dd">Ans. 申し訳ありません。ケーキセットのドリンクはノンアルコールに限ります。ご希望の場合には、別途ケーキ単品でご注文下さい。</dd>
</dl>

CSS

.faq {
	background-color: #cccccc;
	font-size: 10pt;
	padding: 5px 5px 5px 5px;
}
.faq_dt {
	color: #000066;
	font-weight: bold;
}
.faq_dd {
	color: #006600;
	padding-bottom: 1em;
	font-weight: bold;
}

jQuery

$(document).ready(function(){
	$('dl#faq>dd').hide();
	$('dl#faq>dt').click(function(){
		$(this).toggleClass('opened').nextUntil('dl#faq>dt').toggle('slow');
	});
	$('dl#faq>dt.opened').nextUntil('dl#faq>dt').show('slow');
});