JS アコーディオンメニューの設置

2020-06-01

サイトなどでよく見かけるコンテンツを隠しておいて、見出し等をクリックすると表示させるという方法を記載していきます。
CSSのみで実装する方法もありますが、今回はtoggleメソッドを利用した方法を記載したいと思います。
例として、下記のようになります。
見出し部分の右にある + は擬似要素で表現しています。

見出し

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

まず、htmlはこのようになります。

<div class="sample-box">
	<div class="sample-ttl">
		<h2>見出し</h2>
	</div>
	<div class="sample-ctn">
		<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</div>
</div>

</div>

<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

</div>

次に、クリック時に中身が開閉するように、toggleClass();やslideToggle();で動作を設定します。

$('.sample-ttl').on('click', function() {
	$(this).toggleClass('open');
	$(this).next().slideToggle();
});

$('.sample-ttl').on('click', function() {

$(this).toggleClass('open');

$(this).next().slideToggle();

});

jQueryの指定はこれだけです。
見出しの右の + の開閉時の動きが不要であれば、２行目にある$(this).toggleClass(‘open’);はなくても大丈夫で、クラスを付与する事で、動きをつけるためのきっかけとなり、あとはCSSで記述で指定しています。

そして、CSSは、このような記述をしています。

.sample-box{
	width: 90%;
	margin: 0 auto;
	border: solid 1px #ccc;
}
.sample-ttl{
	position: relative;
	padding: 10px 30px;
	background: #eee;
	cursor: pointer;
}
.sample-ttl:before,
.sample-ttl:after{
	content: '';
	display: block;
	height: 1px;
	width: 15px;
	background: #000;
	position: absolute;
	right: 20px;
	top: 50%;
}
.sample-ttl:after{
	transition: 0.3s ease;
	transform: rotate(90deg);
}
.sample-ttl.open:after{
	transform: rotate(360deg);
}
.sample-ctn {
	display: none;
	padding: 30px;
}

.sample-box{

width: 90%;

margin: 0 auto;

border: solid 1px #ccc;

}

.sample-ttl{

position: relative;

padding: 10px 30px;

background: #eee;

cursor: pointer;

}

.sample-ttl:before,

.sample-ttl:after{

content: '';

display: block;

height: 1px;

width: 15px;

background: #000;

position: absolute;

right: 20px;

top: 50%;

}

.sample-ttl:after{

transition: 0.3s ease;

transform: rotate(90deg);

}

.sample-ttl.open:after{

transform: rotate(360deg);

}

.sample-ctn {

display: none;

padding: 30px;

}

クリックする部分がわかり易くなるように、cursor: pointerを指定しています。
【.sample-ctn】に display: none; で最初から閉じた状態になるようになります。最初は開けた状態にしたい場合は、 display: block; をしておくと、開いた状態にすることができます。
また、この開閉する部分に、transitionを記述してしまうと、開閉がスムーズにいかなくなるので、開閉の速さについては、jqueryで.slideToggle(“fast”)や.slideToggle(500)のようにして、設定します。