jQueryのtoggleを使ってクリックアクションで隠れてたコンテンツエリアをアコーディオン風に開閉表示する方法をご紹介します。
Contents
ディスプレイ広告
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>
jQueryの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>
jQueryのtoggleを使ってコンテンツをアコーディオン風に開閉表示する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を使ってアコーディオン風にコンテンツを開閉表示デページ
jQueryのtoggleを使ってアコーディオン風にコンテンツを開閉表示デモ
アコーディオン系も色々とプラグインがありますが、これ位の内容ならプラグインを使わなくてもよいですね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。