jQueryのtoggleを使ってコンテンツをアコーディオン風に開閉表示する方法 DAD UNION

jQueryのtoggleを使ってクリックアクションで隠れてたコンテンツエリアをアコーディオン風に開閉表示する方法をご紹介します。

Contents

アコーディオン表示するCSSの記述例
toggleを使ったJavaScriptの記述
アコーディオン表示するHTMLの記述
jQueryのtoggleを使ってアコーディオン風にコンテンツを開閉表示デページ

アコーディオン表示するCSSの記述例

※アコーディオン表示するliタグはデフォルトで非表示にしておきます。必要に応じて変更して下さい。

<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>

toggleを使ったJavaScriptの記述

※#iWrap h2をクリックすると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の記述

※グレーのエリアをクリックすると隠れてたコンテンツがアコーディオン風に表示されます。必要に応じて変更して下さい。

<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-->