JavaScriptとCSSを使ったクリックで開閉する折りたたみ（アコーディオン）メニューのサンプルです。
HTML/CSSの構成はどのサンプルも同じです。

Ad

個別に開閉する

クリックすると１つずつ開くことができます。

DEMO

折りたたみメニュー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

折りたたみメニュー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

折りたたみメニュー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML

<p class="title">折りたたみメニュー</p>
<div class="box">
	<div class="box-inner">
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	</div>
</div>
<p class="title">折りたたみメニュー</p>
<div class="box">
	<div class="box-inner">
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	</div>
</div>
<p class="title">折りたたみメニュー</p>
<div class="box">
	<div class="box-inner">
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	</div>
</div>

CSS

開閉動作をわかりやすくするための装飾です。
好きにアレンジしてください。
.boxはheight:0がはいっているので、余白など装飾する場合は、.box-innerに入れます。

.title {
	border-bottom: 1px solid #999;
	cursor: pointer;
}
.title:hover {
	color: #999;
}
.title:after {
	content: '↓';
}
.title.open:after {
	content: '↑';
}
.box {
	height: 0;
	overflow: hidden;
	transition: height .5s ease;
}
.box-inner {
	background: #eee;
	padding: 20px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {

	document.querySelectorAll('.title').forEach(title => {
		const box = title.nextElementSibling;
		const inner = box.firstElementChild;

		title.addEventListener('click', () => {
			const isOpen = title.classList.toggle('open');

			if (isOpen) {
				box.style.height = inner.scrollHeight + 'px';
			} else {
				box.style.height = '0px';
			}
		});
	});

});

最初のメニューだけ開いた状態にする

最初のメニューを開いた状態にします。
クリック後の動作は上のサンプルと同じです。

DEMO

折りたたみメニュー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

折りたたみメニュー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

折りたたみメニュー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML

<p class="title2">折りたたみメニュー</p>
<div class="box2">
	<div class="box2-inner">
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	</div>
</div>
<p class="title2">折りたたみメニュー</p>
<div class="box2">
	<div class="box2-inner">
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	</div>
</div>
<p class="title2">折りたたみメニュー</p>
<div class="box2">
	<div class="box2-inner">
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	</div>
</div>

CSS

開閉動作をわかりやすくするための装飾です。
好きにアレンジしてください。
.box2はheight:0がはいっているので、余白など装飾する場合は、.box2-innerに入れます。

.title2 {
	border-bottom: 1px solid #999;
	cursor: pointer;
}
.title2:hover {
	color: #999;
}
.title2:after {
	content: '↓';
}
.title2.open:after {
	content: '↑';
}
.box2 {
	height: 0;
	overflow: hidden;
	transition: height .5s ease;
}
.box2-inner {
	background: #eee;
	padding: 20px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {

	const titles = document.querySelectorAll('.title2');

	titles.forEach(title => {
		const box = title.nextElementSibling;
		const inner = box.firstElementChild;

		title.addEventListener('click', () => {
			const isOpen = title.classList.toggle('open');

			if (isOpen) {
				box.style.height = inner.scrollHeight + 'px';
			} else {
				box.style.height = '0px';
			}
		});
	});

	if (titles.length > 0) {
		titles[0].click();
	}

});

1つだけ開いた状態にする

クリックしたメニュー以外が開いている場合は閉じるようにしています。

DEMO

折りたたみメニュー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

折りたたみメニュー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

折りたたみメニュー

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML

<p class="title3">折りたたみメニュー</p>
<div class="box3">
	<div class="box3-inner">
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	</div>
</div>
<p class="title3">折りたたみメニュー</p>
<div class="box3">
	<div class="box3-inner">
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	</div>
</div>
<p class="title3">折りたたみメニュー</p>
<div class="box3">
	<div class="box3-inner">
		この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
	</div>
</div>

CSS

開閉動作をわかりやすくするための装飾です。
好きにアレンジしてください。
.box3はheight:0がはいっているので、余白など装飾する場合は、.box3-innerに入れます。

.title3 {
	border-bottom: 1px solid #999;
	cursor: pointer;
}
.title3:hover {
	color: #999;
}
.title3:after {
	content: '↓';
}
.title3.open:after {
	content: '↑';
}
.box3 {
	height: 0;
	overflow: hidden;
	transition: height .5s ease;
}
.box3-inner {
	background: #eee;
	padding: 20px;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {

	const titles = document.querySelectorAll('.title3');

	titles.forEach(title => {
		const box = title.nextElementSibling;
		const inner = box.firstElementChild;

		title.addEventListener('click', () => {

			titles.forEach(t => {
				const b = t.nextElementSibling;

				if (t !== title) {
					b.style.height = '0px';
					t.classList.remove('open');
				}
			});

			const isOpen = title.classList.toggle('open');

			if (isOpen) {
				box.style.height = inner.scrollHeight + 'px';
			} else {
				box.style.height = '0px';
			}

		});
	});

});

jQuery版

jQueryでの実装方法については、以前の記事でまとめています。

《jQuery》クリックで開閉する折りたたみメニュー