POPSブログ

jQueryアコーディオン/1

114

  Category:  jquery2012/06/11 pops 

Accordion (clickタイプ)。縦形の最も標準的なアコーディオンである。
外形寸法(高さが固定されていない)が設定されていないので縦に伸縮する。ページの構造上、縦に伸びても気にはならない。

 

アコーディオン(clickタイプ)

最も一般的な縦方向に伸縮する "バーチカルアコーディオン" は当方では単純に「アコーディオン」と呼ぶことにします。


jquery クリック関数(アニメ用関数では無い)、toggle() が「非推奨」となりました。2012/11/21追記


上記の理由により、toggleクリック関数を clickクリック関数に一部書き換えました。尚、jquery-2.0では完全に削除されましたので、toggleクリック関数が動作するのはjquery-1.9までとなります。

● このページの[2][3]は 2012/11/22、2013/01/29、toggle形式でないものに修正しました。


Accordion Menu サンプル 3種類

簡易方式の「アコーディオン」です。ネットで検索すれば何処でもある一般的のものです。


[1] 最も簡単な形

accordion-a.js/下のタイトルをクリックください。

タイトル1

Accordion Menu Example
サブタイトル、文字、リンクなどを記入する。
リンク1

タイトル2

Accordion Menu Example
サブタイトル、文字、リンクなどを記入する。
リンク2

簡単な説明

最も単純で簡単な方法である、但しクリックするエベントの直下に開閉すべくコンテンツがあることが条件である。jQueryのslideToggleを使用している。slideが自動で入り切りなるので便利な場合あり。
簡単な方法ではあるが、開閉に際して何らかの付随処理は出来ない(slideのみ)ので利用が限定される。こんなに簡単ですよと言う「アピール」に過ぎない。
直下に、長い説明文などがあり、かくしておきたい場合などは、単純ゆえ有効な設定方法である。ページの高さをを短く出来る利点がある。この書き方はメニューよりもコンテンツ内部で利用したい。


HTML


<div class="accordion-a">
	<h3 class="accordion_head">タイトル1</h3>
		<div>
			Accordion Menu Example<br />サブタイトル、文字、リンクなどを記入する。<br />
			<a href="javascript:void(0);">リンク1</a>
		</div>
	<h3 class="accordion_head">タイトル2</h3>
		<div>
			Accordion Menu Example<br />サブタイトル、文字、リンクなどを記入する。<br />
			<a href="javascript:void(0);">リンク2</a>
		</div>
</div>

JS


//accordion-a.js
$(function(){
	$('.accordion_head').click(function() {
		$(this).next().slideToggle();
	}).next().hide();
});

別の書き方


//accordion-a
$(function(){
	//一旦消す
	$('div.accordion-a > div').hide();
	$('.accordion_head').click(function() {
		//slideToggle
		$(this).next('div').slideToggle();
	});
});

CSS


/* accordion-a.css 単純 コンテンツにあわせる */
.accordion-a {
	width:300px;
	padding:1px;
	border:1px #EEEEEE solid;
}
.accordion-a div {
	margin:5px;
}
.accordion_head {
	width:289px;
	padding-left:10px;
	border-top:1px #888888 solid;
	background-color:#CCCCCC;
	color:#FFFFFF;
	cursor:pointer;
}


[2] 最も一般的な形

accordion-b.js/下のタイトルをクリックください。

タイトル1

Accordion Menu Example
サブタイトル、文字、リンクなどを記入する。
リンク1

タイトル2

Accordion Menu Example

タイトル3

Accordion Menu Example

簡単な説明

最も一般的な記述方法である、jQueryのtoggleを使用している。関数を交互に実行するので、一回の指定で簡素に書けるのが便利である。クリック関数toggleが非推奨になりましたので、toggleを使用しないJSを追加しました。
開閉に際して何らかの付随処理を書けるので応用の範囲が広がる。またこの例ではhoverイベントもつけているので、使い勝手が良くなる。スクリプトが短いから良いとは限らない。要するに目的の処理ができるかである。
この書き方はメニューに適している。現在はFADEしているが、他のアクションも可能である。

div構成なので内部挿入コンテンツに自由度がある。


上の例の2.3段目の中に、ulブロックが使用されている。通常は、図(図1番)のように上下に隙がある状態で表示される。ここでは隙間を除去して表示している。ulブロックを使用しない場合は起きないので、ulブロックなしで構成したほうが簡便である。


HTML


<div class="accordion-b">
	<h3 class="accordion_head2">タイトル1</h3>
		<div>
			Accordion Menu Example<br />サブタイトル、文字、リンクなどを記入する。<br />
			<a href="javascript:void(0);">リンク1</a>
		</div>
	<h3 class="accordion_head2">タイトル2</h3>
		<div>Accordion Menu Example
			<ul>
				<li><a href="javascript:void(0);">リンク2</a></li>
				<li><a href="javascript:void(0);">リンク3</a></li>
				<li><a href="javascript:void(0);">リンク4</a></li>
			</ul>
		</div>
	<h3 class="accordion_head2">タイトル3</h3>
		<div>Accordion Menu Example
			<ul>
				<li><a href="javascript:void(0);">リンク5</a></li>
				<li><a href="javascript:void(0);">リンク6</a></li>
				<li><a href="javascript:void(0);">リンク7</a></li>
			</ul>
		</div>
</div>

JS

toggleを使用した形式と、toggleを使用しない形式と2つ記載しています。現在、toggleからclickに変更したJSが動作しています。(toggleからclickに変更1)


//accordion-b
//toggleからclickに変更1

$(function(){
	//一旦消す
	$('div.accordion-b > div').hide();

	//click-ACTION
	$('div.accordion-b > h3').click(function() {

		//activeクラス切り替え
		$(this).toggleClass("active");

		//fadeToggleアニメ
		$(this).next('div').fadeToggle('slow');

	});

	//hover-ACTION
	$(".accordion_head2").hover(
		function () {
  			$(this).addClass("title-hover");
		}, 
		function () {
  			$(this).removeClass("title-hover");
	});
});


別の書き方


//accordion-b
//toggleからclickに変更2

$(function(){
	//一旦消す
	$('div.accordion-b > div').hide();
	//複数あるのでeachで処理
	$('div.accordion-b > h3').each(function() {
		//click-ACTION
		$(this).click(function() {
			//何回も使うのでオブジェクトに代入
			var subitem=$(this).next();
			//閉じていれば
			if (subitem.is(':hidden')) {
				$(this).addClass("active");
				subitem.fadeIn('slow');
			} else {
				//開いていれば
				$(this).removeClass("active");
				subitem.fadeOut('slow');
			}
		});
	});
	//hover-ACTION
	$(".accordion_head2").hover(
		function () {
  			$(this).addClass("title-hover");
		}, 
		function () {
  			$(this).removeClass("title-hover");
	});
});

---------------------------------------------------------------------------------

//accordion-b.js
//toggle方式 jquery1.9まで

$(function(){
	//一旦消す
	$('div.accordion-b > div').hide();
	//toggle-ACTION
	$('div.accordion-b > h3').toggle(
		function () {
			$(this).addClass("active");
			$(this).next('div').fadeIn('slow');
		},
		function () {
			$(this).removeClass("active");
			$(this).next('div').fadeOut('slow');
		}
	);
	//hover-ACTION
	$(".accordion_head2").hover(
		function () {
  			$(this).addClass("title-hover");
		}, 
		function () {
  			$(this).removeClass("title-hover");
	});
});


【toggleを使用しないJSを追加しました】、jquery-1.8.2、jquery-1.9.0、jquery-2.0.0b1、でも確認済みです。将来toggle機能が削除されるのでこちらが安心です。

閉じているかの判定、':hidden'を使用したが、「IE8」での判定があやふやだとの情報もあるが、機能しています。
判定の方法は沢山あるので、問題が有れば状況に応じてかえればよい。


● 通常click方式

現在はfadeToggleで動いています。スライドに変更可能です。( fadeToggle() は jquery-1.4.4拠り有効 )


現在は
//fadeToggleアニメ
$(this).next('div').fadeToggle('slow');

------------------------------------------------

スライドの時は
$(this).next('div').slideToggle('slow');

------------------------------------------------

単なるshow hideの切り替えならば
$(this).next('div').toggle('slow');

● hidden判定方式

上記の通常click方式では条件が違う場合の記述が出来ないから。hidden判定で記述するもの。
hasClass()で判定する方法もある。


jquery独自の擬似要素、hiddenを使用した

閉じているか判定する、subitemは$(this).next()、つまりh3直下のDIVである
if (subitem.is(':hidden')) {

visibleを使用すれば
if (!subitem.is(':visible')) {

高さ、幅があるかでも判定できる


CSS


/* accordion-b.css 一般的 */
.accordion-b {
	width:300px;
	padding:1px;
	border:1px #EEEEEE solid;
}
.accordion-b div {
	margin:5px;
}
.accordion-b div ul {
	display:inline;
	*text-indent: -15px;/*IE6.7ハック*/
}
.accordion-b h3.active {
	color:#FF0000;
}
.accordion_head2 {
	width:289px;
	padding-left:10px;
	border-top:1px #000000 solid;
	background-color:#555555;
	color:#FFFFFF;
	cursor:pointer;
}
.accordion_head2.title-hover {
	background-color:#888888;
}

ul を、display:inline にするとIE67 以外隙間は除去される(図2番)。IE67はインデント部が除去されない(図3番)。
IE67 は padding margin で調整できないので、text-indent を調整すれば同じになる(図2番)。



隙間除去、修正

.accordion-b div ul {
	display:inline;
	*text-indent: -15px;/*IE6.7ハック*/
}
-------------------------------------------

隙間があったほうが良い場合は

.accordion-b div ul {
	display:block;
}


[3] ULのリスト形

accordion-c.js/下のタイトルをクリックください。


簡単な説明

一般的な UL LI 構成の記述方法である、jQueryのtoggleを使用している。関数を交互に実行するので、一回の指定で簡素に書けるのが便利である。クリック関数toggleが非推奨になりましたので、toggleを使用しないJSを追加しました。
開閉に際して何らかの付随処理を書けるので応用の範囲が広がる。またこの例ではhoverイベントもつけているので、使い勝手が良くなる。スクリプトが短いから良いとは限らない。要するに目的の処理ができるかである。
この書き方はメニューに適している。現在はSHOWしているが、他のアクションも可能である。

ul構成なので、CMS等の構成に近い形式である。


2012/06/14/ ページのCSSなどの影響で、jQuery処理が不安定なので、外側「div」を「id」にして「#accordion-c」 として処理するように変更した。(.accordion-c では ul の認識が甘い)


HTML

注意、 外側は div 構造は id で処理しています。


<div id="accordion-c">
	<h3 class="accordion_head3">タイトル1</h3>
		<ul>
			<li><a href="javascript:void(0);">リンク1</a></li>
			<li><a href="javascript:void(0);">リンク2</a></li>
			<li><a href="javascript:void(0);">リンク3</a></li>
		</ul>
	<h3 class="accordion_head3">タイトル2</h3>
		<ul>
			<li><a href="javascript:void(0);">リンク4</a></li>
			<li><a href="javascript:void(0);">リンク5</a></li>
			<li><a href="javascript:void(0);">リンク6</a></li>
		</ul>
	<h3 class="accordion_head3">タイトル3</h3>
		<ul>
			<li><a href="javascript:void(0);">リンク7</a></li>
			<li><a href="javascript:void(0);">リンク8</a></li>
			<li><a href="javascript:void(0);">リンク9</a></li>
		</ul>
</div>

JS

toggleを使用した形式と、toggleを使用しない形式と2つ記載しています。現在、toggleからclickに変更したJSが動作しています。(toggleからclickに変更1)


//accordion-c
//toggleからclickに変更1
$(function(){
	//一旦消す
	$('#accordion-c > ul').hide();

	$('#accordion-c > h3').click(function() {

		//activeクラス切り替え
		$(this).toggleClass("active");

		//showアニメ
		$(this).next('ul').toggle('slow');

	});

	//hover-ACTION
	$(".accordion_head3").hover(
		function () {
  			$(this).addClass("title-hover");
		}, 
		function () {
  			$(this).removeClass("title-hover");
	});
});


別の書き方


//accordion-c
//toggleからclickに変更2
$(function(){
	//一旦消す
	$('#accordion-c > ul').hide();
	//複数あるのでeachで処理
	$('#accordion-c > h3').each(function() {
		//click-ACTION
		$(this).click(function() {
			//何回も使うのでオブジェクトに代入
			var subitem=$(this).next('ul')
			//閉じていれば
			if (subitem.is(':hidden')) {
				$(this).addClass("active");
				subitem.show();
			} else {
				$(this).removeClass("active");
				subitem.hide();
			}
		});
	});
	//hover-ACTION
	$(".accordion_head3").hover(
		function () {
  			$(this).addClass("title-hover");
		}, 
		function () {
  			$(this).removeClass("title-hover");
	});
});

---------------------------------------------------------------------------------

//accordion-c
//toggle方式 jquery1.9まで

$(function(){
	//一旦消す
	$('#accordion-c > ul').hide();
	//toggle-ACTION
	$('#accordion-c > h3').toggle(
		function () {
			$(this).addClass("active");
			$(this).next('ul').show();
		},
		function () {
			$(this).removeClass("active");
			$(this).next('ul').hide();
		}
	);
	//hover-ACTION
	$(".accordion_head3").hover(
		function () {
  			$(this).addClass("title-hover");
		}, 
		function () {
  			$(this).removeClass("title-hover");
	});
});


【toggleを使用しないJSを追加しました】、jquery-1.8.2、jquery-1.9.0、jquery-2.0.0b1、でも確認済みです。将来toggle機能が削除されるのでこちらが安心です。


● 通常click方式

現在はtoggleで動いています。スライドに変更可能です。( fadeToggle() は jquery-1.4.4拠り有効 )


現在は
//showアニメ
$(this).next('ul').toggle('slow');

------------------------------------------------

スライドの時は
$(this).next('ul').slideToggle('slow');

------------------------------------------------

フェードの時は
$(this).next('ul').fadeToggleアニメ('slow');

CSS

注意重要、ul は明示的に display:block にしている。


/*accordion-c.css ul使用一般的 */
#accordion-c {
	width:300px;
	padding:1px;
	border:1px #EEEEEE solid;
}
#accordion-c ul {
	display:block;/* 重要 */
	list-style:none;
	margin:0;
	padding:0;
}
#accordion-c ul li {
	list-style:none;
	width:285px;
	margin-left:10px;
}
.accordion_head3 {
	width:289px;
	padding-left:10px;
	border-top:1px #000000 solid;
	background-color:#AAAAAA;
	color:#FFFFFF;
	cursor:pointer;
}
#accordion-c h3.active {
	color:#000000;
}
.accordion_head3.title-hover {
	background-color:#CCCCCC;
}


共通のまとめ、注意事項

1. 変化に際してのクラスの妙名、CSSの指定方法などは、使用者の自由である。(状況により変える)
2. JSで、next('div')で指定してあるが、HTML構造を変えるならば「指定要素名」をかえればよいだけである。通常ラベルの直下は、div ul のことが多い。直下にない場合は、jQueryは命令など多い(children()関数 find()関数 filter()関数、または直接指定するなど方法は多彩)ですから、それなりの他の指定方法をとる。
3. クラス名は、ページ内に沢山使用されているので、重複しないように独自の名前をつけたほうが良い。(前に自分の名前をつけるなど区別をつければ問題が出難い)
4. アコーディオンにおいては、既存の「jquery アニメ」が使用されることが多いようです。(簡単であるからだと思うが。複雑にしても余り効果がないのも理由かも知れない)

5. アコーディオンのJS自体は簡単です。全体の「幅が狭い」場合は、ラベル、li要素の文字がはみ出したり、カラム落ちしないようCSSの工夫が必要です。
6. li要素の最後に余分な「空白行」などでる場合は、ul要素のCSSを list-style:none にすると直る。
7. dl dt 使用の場合は ul li と少し「振る舞い」が少し違うので注意です。CSSの修正が多くなります。
8. 「ulブロック構造」の場合、確実にulを認識するようにしないと問題が置きやすいので注意。ul にクラスを与える方法もあるが、、。


私の場合

右のサイドパー、「カテゴリー一覧」などがアコーディオンになっていますが、CSSで「表示.非表示」の切り替えをしているだけ。比類なき単純さである。コンテンツに Flash JS など重いものがあるために負荷がかからないようにしている。


上記サンプルのCSSは簡単な例であって、完全オールブラウザ対応では無く、且つこのページのCSSも影響しています。最終的には使用者が構造、ページなどにあわせて決定してください。


以上です。


[ この記事のURL ]


タグ:series , Accordion , jquery

[ jQueryアコーディオン シリーズ記事 ]

jQueryアコーディオンHoverMenu/62012.07.02
jQueryアコーディオンHoverMenu/52012.07.01
jQueryアコーディオンHoverMenu/42012.06.29
jQueryアコーディオンHoverMenu/32012.06.28
jQueryアコーディオンHoverMenu/22012.06.26
jQueryアコーディオンHoverMenu/12012.06.25
jQueryアコーディオン/82012.06.20
jQueryアコーディオン/72012.06.19
jQueryアコーディオン/62012.06.18
jQueryアコーディオン/52012.06.17
jQueryアコーディオン/42012.06.16
jQueryアコーディオン/32012.06.15
jQueryアコーディオン/22012.06.13
jQueryアコーディオン/12012.06.11

 

ブログ記事一覧



[1]