jQueryのtoggleを使ってアコーディオン風にコンテンツを開閉表示してみる

クリックによって隠れてたコンテンツエリアをアコーディオン風に表示してみます。

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

2.JavaScriptの記述例

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

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

jQueryのtoggleを使ってアコーディオン風にコンテンツを開閉表示デモ

アコーディオン系も色々プラグインがありますが、これ位の内容でしたらプラグインを使わなくてもよい様な気がします。

※流用される場合は自己責任でお願いします。