jQueryのtoggleで簡単アコーディオン表示を実装する方法｜DAD UNION

jQueryのtoggleメソッドを利用して、クリックアクションで隠れていたコンテンツエリアをアコーディオン風に開閉表示する方法を解説します。

Contents

アコーディオン表示の基本概念
CSSの設定
JavaScriptの設定
HTMLの設定
jQueryのtoggleを使ってアコーディオン風にコンテンツを開閉表示デページ
まとめ

アコーディオン表示の基本概念

まずは基本的な概念として、アコーディオン表示とは、特定の見出しをクリックすると、その直下にあるコンテンツがスライドして表示・非表示になるUIのことを指します。この機能をjQueryのtoggleメソッドを用いて実装してみましょう。

CSSの設定

アコーディオン表示に必要なCSSの記述を以下に示します。デフォルトでは、コンテンツを非表示にしておきます。必要に応じてスタイルをカスタマイズしてください。

<style type="text/css">
<!--
#iWrap{
	margin:0 auto;
	padding: 7px;
	width: 400px;
	border: 2px solid #333;
}
#iWrap h2{
	margin:10px;
	padding: 5px;
	border: 2px solid #333;
	background-color:#CCC;
	cursor: pointer;
}
#iWrap h2:hover{
	background-color:#FFF;
}
#iWrap div{
	padding:5px;
}
#iWrap div ul{
	margin:0 3px;
	padding:0;
}
#iWrap div li{
	line-height:1.2em;
	list-style:none;
}
-->
</style>

JavaScriptの設定

次に、jQueryを使ってクリックイベントを設定します。見出し（h2）をクリックすると、その直後のdiv要素がスライドして表示・非表示になります。

<script src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function() {
	$("#iWrap div").hide();
	$("#iWrap h2").click(function(){
		$(this).next().toggle("normal");
	});
});
</script>

HTMLの設定

最後に、HTMLの構造を示します。以下の例では、見出し部分（グレーのエリア）をクリックすると隠れていたコンテンツがアコーディオン風に表示されます。

<h1>以下のグレーのエリアをクリックすると隠れてたコンテンツがアコーディオン風に表示されます。</h1>


<div id="iWrap">

<h2>最近の投稿</h2>


<div>

<ul>

 	<li>
					<a href="https://dad-union.com/javascript/57">getJSONでjson形式の配列情報を取得表示する方法</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/51">jQueryの$.get()を使ってxmlデータを取得表示する方法</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/46">window.location.search：URL（アドレス）のパラメータ値をJavaScriptで取得する方法</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/43">テキストボックスの入力文字をJavaScriptで別エリアに同時にコピー表示する方法</a></li>


 	<li>
					<a href="https://dad-union.com/javascript/32">iframe先ページの高さにあわせてコンテンツを表示する方法</a></li>

</ul>

</div>


<h2>カテゴリー</h2>


<div>

<ul>

 	<li class="cat-item cat-item-2"><a href="https://dad-union.com/category/javascript">JavaScript</a></li>


 	<li class="cat-item cat-item-3"><a href="https://dad-union.com/category/jquery">jQuery</a></li>

</ul>

</div>

</div>

<!--/iWrap-->