《jQuery》クリックで開閉するアコーディオンメニュー

公開日：2023年09月13日　最終更新日：2024年2月27日

jQuery

クリックで開閉するアコーディオンメニューのサンプルになります。

DEMO

アコーディオンメニュー

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

HTML

<p class="title">アコーディオンメニュー</p>
<p class="box">
	この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p>

CSS

開閉動作をわかりやすくするための装飾です。
好きにアレンジしてください。

.title:hover {
	color: #999;
}
.title:after {
	content: '↓';
}
.title.open:after {
	content: '↑';
}
.box {
	background: #eee;
	padding: 20px;
}

JS

JSの記述の前にjQueryの読み込みが必要です。

jQuery(function($){
	$('.box').hide();
	$('.title').click(function () {
		$(this).next('.box').slideToggle();
		$(this).toggleClass('open');
	});
});