• このエントリーをはてなブックマークに追加

2015年06月16日(Tue)

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

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

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

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>

今回の仕様で必要となるのは、3行目の.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>

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

HTML

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

DEMO

上記のCSSJavaScriptHTMLの3点を使用したDEMOです。

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

全てを1つにまとめた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>アコーディオンメニュー1</dt>
	<dd class="gra1">
		アコーディオンメニュー1で開いています。<br />
		もう一度、アコーディオンメニュー1をクリックすると閉じます。
	</dd>
	<dt>アコーディオンメニュー2</dt>
	<dd class="gra1">
		アコーディオンメニュー2で開いています。<br />
		もう一度、アコーディオンメニュー2をクリックすると閉じます。
	</dd>
	<dt>アコーディオンメニュー3</dt>
	<dd class="gra1">
		アコーディオンメニュー3で開いています。<br />
		もう一度、アコーディオンメニュー3をクリックすると閉じます。
	</dd>
</dl>
</body>
</html>

【参考Webサイト】

コメント(0件)

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

コメントフォーム

【ソーシャルボタン】


TOP