JavaScript - （矢印付き）開閉メニューの作り方

JavaScriptを使って、 矢印付きの開閉メニュー（アコーディオンメニュー）を作りました。

メニュー部分の動作は、HTMLの「details」タグとほとんど同じです。

「details」タグがIE、Edgeに対応していないので JavaScriptで作りました。

シンプルな構造で簡単に使えると思いますので、ご自由に利用してください。

矢印付きの開閉メニュー 動作サンプル

HTML

<div class="menu_head arrow_close">メニューA</div>
<div class="menu_body close">
	<ul>
		<li>A-1</li>
		<li>A-2</li>
		<li>A-3</li>
	</ul>
</div>

<div class="menu_head arrow_close">メニューB</div>
<div class="menu_body close">
	<ul>
		<li>B-1</li>
		<li>B-2</li>
		<li>B-3</li>
	</ul>
</div>

<div class="menu_head arrow_close">メニューC</div>
<div class="menu_body close">
	<ul>
		<li>C-1</li>
		<li>C-2</li>
		<li>C-3</li>
	</ul>
</div>

解説

次の「div」タグ２つがワンセットとなります。

上のdivタグがメニュー名で、 下のdivタグがコンテンツ部分です。

<div class="menu_head arrow_close">メニュー名</div>
<div class="menu_body close">
コンテンツ部分
</div>

CSS

<style>

	div.close {
		display: none;
	}
	div.menu_head::before {
		content: "\025bc  ";
	}
	div.arrow_close::before {
		content: "\025b6  ";
	}
	
	/* 以下はデザイン部分 ここをカスタマイズします*/
	div.menu_head, div.menu_body{
		width: 300px;
		border: 1px solid black;
	}
	
	div.menu_head {
		background-color: crimson;
		color: white;
		font-weight: bold;
		margin-top: 5px;
	}

</style>

解説

後半がデザイン部分なので、 使用する場合はここでデザインを自由に変えてください。

前半部分は、疑似要素を使って矢印の設定をしています。

JavaScript

<script>

var head = document.getElementsByClassName('menu_head');

for (var i = 0; i < head.length; i++){
	head[i].addEventListener('click', function(){
		this.classList.toggle('arrow_close');
		this.nextElementSibling.classList.toggle('close');
	}, false);
}

</script>

解説

JavaScript部分は全部で8行程度のシンプルなコードとなっています。

classList.toggle()メソッドを使って、クラスを付けたり外したりしています。

次のコード部分で、「arrow_close」クラスの付け・外しを行い、矢印を入れ替えます。

this.classList.toggle('arrow_close');

下のコード部分で、「close」クラスの付け・外しを行い、 コンテンツ部分の表示・非表示を入れ替えます。

this.nextElementSibling.classList.toggle('close');

まとめ

・JavaScriptを使って、矢印付き開閉メニューを作ってみました。

・動作はdetailsタグとほぼ同じです。

・CSSの後半部分でデザインを自由に変えてください。

・JavaScript部分は、classList.toggle()メソッドでクラスの付け・外しを行っています。