GoogleのjQueryを利用したクリックで開閉するアコーディオンパネル

2015年06月16日（Tue）

jQuery

GoogleのjQueryを利用したクリックで開閉するアコーディオンパネルをカスタマイズしやすいようにシンプルに作成いたしました。必要なものは、下記のCSS、JavaScript、HTMLの３点です。

CSS

<style type="text/css">  
<!-- 
.accordion dd{ display:none; }	
.accordion dt{
	cursor:pointer;
	border-bottom:1px dotted #cccccc;
	}
.accordion dt:after{ content:"[open]"; }
.accordion dt.active:after{ content:"[close]"; }
 -->  
</style>

今回の仕様で必要となるのは、３行目の.accordion dd{ display: none; }です。
使用した主だったCSSプロパティの解説は下記の通りです。

display:none;	要素が表示されず、レイアウトに影響を与えない
cursor:pointer;	カーソルを合わせるとリンク時と同じカーソルを表示
:after	要素の直後
content:	内容（コンテンツ）を挿入

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
    $(function(){
        $(".accordion dt").on("click", function() {
            $(this).next().slideToggle();
            $(this).toggleClass("active");
        });
    });
</script>

１行目でGoogleにホストされているjQueryファイルの読み込んでいます。
今回は指定していませんが、５行目のslideToggleでアニメーションの早さを変えることができます。
例： .slideToggle(“fast”)、.slideToggle(“slow”)、.slideToggle(200)
６行目のtoggleClassを使って開閉の切り替えを行っていますが、不要な場合は削除可能です。

HTML

<dl class="accordion">
	<dt>アコーディオンメニュー１</dt>
	<dd class="gra1">
		アコーディオンメニュー１で開いています。<br />
		もう一度、アコーディオンメニュー１をクリックすると閉じます。
	</dd>
	<dt>アコーディオンメニュー２</dt>
	<dd class="gra1">
		アコーディオンメニュー２で開いています。<br />
		もう一度、アコーディオンメニュー２をクリックすると閉じます。
	</dd>
	<dt>アコーディオンメニュー３</dt>
	<dd class="gra1">
		アコーディオンメニュー３で開いています。<br />
		もう一度、アコーディオンメニュー３をクリックすると閉じます。
	</dd>
</dl>

DEMO

上記のCSS、JavaScript、HTMLの３点を使用したDEMOです。

アコーディオンメニュー１: アコーディオンメニュー１で開いています。
もう一度、アコーディオンメニュー１をクリックすると閉じます。
アコーディオンメニュー２: アコーディオンメニュー２で開いています。
もう一度、アコーディオンメニュー２をクリックすると閉じます。
アコーディオンメニュー３: アコーディオンメニュー３で開いています。
もう一度、アコーディオンメニュー３をクリックすると閉じます。

全てを１つにまとめたHTMLのソースコードです。

accordion.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GoogleのjQueryを利用したクリックで開閉するアコーディオンパネル【DEMO】</title>
<style type="text/css">  
<!-- 
.accordion dd{ display: none; }	
.accordion dt{
	cursor: pointer;
	border-bottom:1px dotted #cccccc;
	}
.accordion dt:after{ content:"[open]"; }
.accordion dt.active:after{ content:"[close]"; }
 -->  
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
    $(function(){
        $(".accordion dt").on("click", function() {
            $(this).next().slideToggle();
            $(this).toggleClass("active");
        });
    });
</script>
</head>
<body>
<dl class="accordion">
	<dt>アコーディオンメニュー１</dt>
	<dd class="gra1">
		アコーディオンメニュー１で開いています。<br />
		もう一度、アコーディオンメニュー１をクリックすると閉じます。
	</dd>
	<dt>アコーディオンメニュー２</dt>
	<dd class="gra1">
		アコーディオンメニュー２で開いています。<br />
		もう一度、アコーディオンメニュー２をクリックすると閉じます。
	</dd>
	<dt>アコーディオンメニュー３</dt>
	<dd class="gra1">
		アコーディオンメニュー３で開いています。<br />
		もう一度、アコーディオンメニュー３をクリックすると閉じます。
	</dd>
</dl>
</body>
</html>

【参考Webサイト】

コメント（0件）

GoogleのjQueryを利用したクリックで開閉するアコーディオンパネルに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。お気軽にコメントしてください。

WEB帳
GoogleのjQueryを利用したクリックで開閉するアコーディオンパネル