jQueryで、アコーディオンメニューを作る方法を紹介します。
今回は、「.slideUp()」や「.slideDown()」を使わずに、「.slideToggle()」を使用しました。

使用したjQueryは、「jquery-1.11.3.min.js」です。

↓以下が実際のソースサンプルです。

▼JavaScript

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("dt").on("click", function() {
			$(this).next().slideToggle("slow");
		});
	});
</script>

▼CSS

<style type="text/css">
dt {
	display:block;
	width:300px;
	height:30px;
	line-height:30px;
	text-align:center;
	border:#666 1px solid;
	cursor:pointer;
}
dd {
	background:#ccddee;
	width:300px;
	height:50px;
	line-height:50px;
	text-align:center;
	border:#666 1px solid;
	display:none;
	font-size:12px;
}
</style>

▼HTML

<dl>
  <dt>アコーディオンメニューA</dt>
  <dd>アコーディオンメニューAが開く</dd>
  <dt>アコーディオンメニューB</dt>
  <dd>アコーディオンメニューBが開く</dd>
  <dt>アコーディオンメニューC</dt>
  <dd>アコーディオンメニューCが開く</dd>
</dl>

今回、参考にさせていただいたのは、
『超簡単jQuery！toggle系メソッドでアコーディオンメニューやタブをさくっと実装する方法』さんです。
ありがとうございます。

デモページは、こちら