LINK-GOTO-BACK(元のページに戻る)


jQuery開閉連動形アコーディオン


[jquery] 2013/01/31/
ブログ記事、jQueryアコーディオン2、開閉連動形のAccordion(clickタイプ)を「単純効率化」したものです。スクリプトの都合で開閉は同時に行われます。


 

お知らせ、 [jQuery 簡単にWordPress等のCMSサイドバーをアコーディオンにする]

このページのアコーディオンはHTMLはオリジナル構造のものですから構造を変更しなければなりません。
下記記事のアコーディオンは、WordPress、CMS等、既存のページ(テーマ、テンプレート)の構造を変更することなく指定の「サイドバー」ブロックあるいは、記事のコンテンツなどをアコーディオン化するものです。お探しのものがこちらなら、下記記事を参照ください。2015/04/29/

【参照】当方の記事: jQuery 簡単にWordPress等のCMSサイドバーをアコーディオンにする /「個別開閉」「同時開閉」の2種類の動作が確認できます。

【デモ】jQuery WordPress用アコーディオン デモ /「個別開閉」「同時開閉」「開いてから閉じる」「閉じてから開く」の4種類の動作が確認できます。

 

DEMO6 アコーディオン 単純効率化サンプル


Exampleの相違点

1. スクリプトを単純効率化しました。少し「要素」の認識が早くなります。
2. 開閉連動形ですが「同時に開閉」します。(こちらの方が見易いかも知れない)
3. 初期時に、開いておく場所を指定可能です。
4. スクリプトを短くしただけにすぎません。細かい処理は出来ません。


Example

このデモはページは、[ jqury-1.9.0 ]、で動作しています。
このサンプルは、jqury-2.0系にも対応出来ます。(jqury-1.8.2 jqury-1.9.0 jqury-2.0.0b1、で動作確認済み)
このサンプルは、初期時、1番目が開いた状態に設定されています。



[1] 同時開閉形 (div使用)

accordion-d.js/下のタイトルをクリックください。どんな場所でも使えるようにdivで作成


タイトル 1

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

タイトル 2

Accordion Menu Example

タイトル 3

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


[2] 同時開閉形 (ul li使用、問題の出る構造のタイプ)

accordion-e.js/下のタイトルをクリックください。 ul li で作成 注意、外枠はIDで構成しています。#accordion-e




[3] 同時開閉形 (dl dt使用)

accordion-f.js/下のタイトルをクリックください。dl dt で作成




 

[4] 開いている所を閉じてから、開く形式 (dl dt使用)

accordion-40.js / 新旧組み合わせで作成した、認識を高めるためID名を入れている違いあり。HTML JS CSS は下段に有り。




Accordion Menu サンプル 3種類

簡易方式の「開閉連動形アコーディオン」です。他のラベルを押せば開いているところが自動で閉じるタイプですが、処理を単純化したため「同時開閉」になります。

「閉じてから開く」よりも「同時開閉」の方が見やすいと思いますが、どうでしょうか。


簡単な説明


[1]を例にしますと、下記のような簡単な記述で「開閉連動形」になります。 これは動かす部分が「div要素」ですから、next('div')、.siblings('div:visible')、となっています。
「ul dl 要素」なら其の部分が変わるだけです。


//クリックアクション設定
$('.accordion-d').find('h3').click(function() {

	$(this).next('div').slideToggle('fast')
	.siblings('div:visible').slideUp('fast');

});

こちらの方が若干速くなる。(認識を高め多少でも速くする)


$('.accordion-d > h3').click(function() {................
よりも

$('.accordion-d').find('h3').click(function() {...............
find()で絞り込む方が若干速くなる

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

html CSSを変更せねばならないが、出来ればID名をつけた方が尚良い

$('#accordion-d').find('h3').click(function() {...............

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

ID名の付いた要素を複数回参照するので、オブジェクトを保存する。

var accordionItem=$('#accordion-d');
accordionItem.find('h3').click(function() {...............

などと書いた方が早い

「h3タイトル要素」に active クラスを与える。クラス名は何でも良い。
最初はクリックした要素を換えて、其の後開いている要素を閉じた後にactive クラスを削除している。


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

スライド処理略す

$(this).siblings('h3').removeClass('active');

[2][3]をワザと違わせて書いていますが、どちらも同じ処理になります。


スライドアニメの速度は状況に応じて変更します。


fast normal slow またはミリ秒
.slideToggle('fast') など

.slideToggle('600') 文字形
.slideToggle(600) 数値でも良い

hoverアクションの部分、簡単なクラス切り替えならば、.toggleClass('クラス名')で省略できる。


[3]の例

//hover-ACTION
$('.accordion-head6').hover(function() {

	$(this).toggleClass('title-hover');
});

個別にクラス以外の処理などを行う場合は、従来の書き方

//hover-ACTION
$(".accordion-head6").hover(
	function () {
  		必要な処理
	}, 
	function () {
  		必要な処理
	}
);

クラス名よりID名のほうが良い。

サンプルのために、クラス名で操作しているが、ID名を付けたほうが認識も動作も早い。


$('.accordion-d').............

$('要素のID名').............


[1][2][3]のHTML JS CSS


JSのみの変更です。同じ「開閉同時形」でもアニメに若干違いがありますが、比較すればこちらが簡単である。


JS


[1] 同時開閉形 (div使用)


//accordion-d.js
(function($){

	$(function(){

		//全てを閉じる
		$('.accordion-d').find('div').hide();

		//active要素を指定して開く
		var no=0;
		$('.accordion-d').find('h3').eq(no).next('div').show();

		//クリックアクション設定
		$('.accordion-d').find('h3').click(function() {

			$(this).next('div').slideToggle('fast')
			.siblings('div:visible').slideUp('fast');

		});
	});

})(jQuery);

-----------------------------------------------------
最小これでいける、(function($){})(jQuery);は有った方が安心

//accordion-d.js
(function($){
	$(function(){
		$('.accordion-d').find('div').hide();
		$('.accordion-d').find('h3').click(function() {
			$(this).next('div').slideToggle('fast')
			.siblings('div:visible').slideUp('fast');
		});
	});
})(jQuery);

[2] 同時開閉形 (ul li使用)


//accordion-e.js
(function($){

	$(function(){

		//全てを閉じる
		$('#accordion-e').find('ul').hide();

		//active要素を指定して開く
		var no=0;
		$('#accordion-e').find('h3').eq(no).addClass("active").next('ul').show();

		//クリックアクション設定
		$('#accordion-e').find('h3').click(function() {

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

			//slide
			$(this).next('ul').slideToggle('fast')
			.siblings('ul:visible').slideUp('fast')
			.prev('h3').removeClass('active');

		});

		//hover-ACTION
		$('.accordion-head5').hover(function() {

			$(this).toggleClass('title-hover');
		});
	});

})(jQuery);

[3] 同時開閉形 (dl dt使用)


//accordion-f.js
(function($){

	$(function(){

		//全てを閉じる
		$('.accordion-f').find('dl').hide();

		//active要素を指定して開く
		var no=0;
		$('.accordion-f').find('h3').eq(no).addClass("active").next('dl').show();

		//クリックアクション設定
		$('.accordion-f').find('h3').click(function() {

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

			//slide
			$(this).next('dl').slideToggle('fast')
			.siblings('dl:visible').slideUp('fast');
			$(this).siblings('h3').removeClass('active');

		});

		//hover-ACTION
		$('.accordion-head6').hover(function() {

			$(this).toggleClass('title-hover');
		});
	});

})(jQuery);


HTML CSS

jQueryアコーディオン2、に掲載の HTML CSS と同じです。そちらを参照ください。


active要素を指定して開く

初期時に、開いておく場所を指定出来ます。上記サンプルでは1番目を開いています。JS上部で設定可能です。
[1] 開閉連動形、を例に説明します。var no=0 に位置の番号を記入する。1番目は 0 、2番目は 1 になる。


位置の番号を記入

//active要素を指定して開く
var no=0;
$('.accordion-d').find('h3').eq(no).next('div').show();

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

使用しない場合は、実行させないようにする

//$('.accordion-d').find('h3').eq(no).next('div').show();

[2][3]も、スクリプトに相違はありますが、設定方法は同じになります。


[4]のHTML JS CSS


ブログ記事「jQueryアコーディオン2」ページ掲載の[3]、 開いてから閉じるを、新旧組み合わせで作成した、認識を高めるためID名を入れている違いあり。
こちらの方が多少軽快である。私見ではあるが、上の[3]の方がスクリプトが簡単であるし、見栄えも変わらないと思う。


HTML (dl dt使用)

dl dt を使用した方がキレイに仕上がります。(ul li は余白寸法など合わせるのに大変です)、ul li構成に変更するのは HTML JS ともに簡単です。



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

JS

accordion-40.js


//accordion-40.js
(function($){

	$(function(){

		//オブジェクトを保存
		var accordionItem=$('#accordion-40');
		//全てを閉じる
		accordionItem.find('dl').hide();

		//active要素を指定して開く
		var no=0;
		accordionItem.find('h3').eq(no).addClass("active").next('dl').show();

		//クリックアクション設定
		accordionItem.find('h3').click(function() {

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

			//DL要素オブジェクトを代入
			var hitItem = $(this).next();
			//開いている要素
			var openItem = hitItem.siblings('dl:visible');
			//開いている要素があれば最初に閉じる
			if (openItem.length) {
				openItem.prev().removeClass('active');
				openItem.slideUp('fast',function() {
					//其の後開く
					hitItem.slideToggle('fast');
				});
			} else {
				//開いている要素が無ければ
				hitItem.slideToggle('fast');
			}

		});

		//hover-ACTION
		accordionItem.find('h3').hover(function() {

			$(this).toggleClass('hover');
		});
	});

})(jQuery);


CSS

accordion-40.css


/* accordion-40.css */

#accordion-40 {
width:300px;
padding:1px;
border:1px #EEEEEE solid;
}

#accordion-40 .accordion-head {
width:290px;
height:20px;
padding-left:10px;
border-top:1px #888888 solid;
background:url(/main/images/arrow_5.gif) no-repeat;
background-position:right 0px;
background-color:#20B2AA;
color:#FFFFFF;
cursor:pointer;
}
#accordion-40 h3.active {
background-position:right -21px;
}
#accordion-40 h3.hover {
background-color:#40E0D0;
}

#accordion-40 dl {
width:280px;
margin:0;
padding:0;
}
#accordion-40 dl dt {
width:285px;
margin-left:10px;
}

当方のCSSです、画像パスなどは環境に合わせます。


画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。

透過矢印画像 gif 21x44 透過矢印画像 gif 20x44 透過矢印画像 gif 15x40 透過矢印画像 gif 15x40

 

以上です。

 

LINK-GOTO-BACK(元のページに戻る)