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


jQuery色々なアコーディオン

toggleクリック関数を使用しないアコーディオン Accordion(clickタイプ)を「単純効率化」したものです。個別開閉、同時開閉、開いてから閉じる、閉じてから開く、など色々な形式あり。
WordPress等のCMSサイドバー用アコーディオン、ページ先頭にスクロールするアコーディオンなども有ります。
2015/08/11/追加

 

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

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

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

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

 

お知らせ2、 [jQuery ページ先頭にスクロールするアコーディオン]

DIV構成の記事用途のアコーディオンです。アコーディオンが開閉した場合にコンテンツがページ先頭位置(TOP)にスクロールしますのでスマートホンサイトには多少有効と思います。
記事を順次読んでゆくのには便利です。興味のある方は下記記事を参照ください。2015/08/11/

【参照】当方の記事: jQuery ページ先頭にスクロールするアコーディオン / 4種類の開閉動作が確認できます。

 

 

jQuery色々なアコーディオン

以下、このページの記事およびサンプルです。

DEMO7 jQuery色々なアコーディオン 単純効率化サンプル


Example

このデモページは[jqury-1.9]で動作しています。
このサンプルは、jqury-2.0系にも対応出来ます。(jqury-1.6.4 jqury-1.8.2 jqury-1.9.0 jqury-2.0.0b1、で動作確認済み)



accordion 29

開いたままのタイプ。

表示/非表示 切り替え

MENUブロック1

MENUブロック2

MENUブロック3


accordion 30

開いたままのタイプ。

Slide

MENUブロック1

MENUブロック2

MENUブロック3


accordion 31

同時開閉タイプ。(これが簡単で推奨だ!)

Slide

MENUブロック1

MENUブロック2

MENUブロック3


accordion 32

開いた所を閉じて、開くタイプ。

Slide

MENUブロック1

MENUブロック2

MENUブロック3





Accordion Menu サンプル 4種類

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

このサンプルは、初期時、1番目(上段)が開いた状態に設定されています。


toggleクリック関数を使用しないJS、(オブジェクトを保存したJS)

オブジェクトを保存したJSで多少は速くなります。(前ページと若干の違い有り)


accordion29-accordion32、多少効率良くなり早くなる。基本的にこの4種類があれば事足りる。



//Accordion
(function($){

	//accordion29表示/非表示 の切り替え
	$(function(){

		//オブジェクトを保存
		var accordionItem=$('#accordion-29');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

			//active切り替え
			$(this).toggleClass('active');
			//表示非表示
			$(this).next('div').toggle();

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);

//Accordion
(function($){

	//accordion30
	$(function(){

		//オブジェクトを保存
		var accordionItem=$('#accordion-30');
		//一旦全部消す
		$('#accordion-30').find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

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

			//slideToggle
			$(this).next('div').slideToggle('slow');

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);


//Accordion
(function($){

	//accordion31
	$(function(){

		//オブジェクトを保存
		var accordionItem=$('#accordion-31');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

			//slide
			$(this).next('div').slideToggle('slow')
			.siblings('div:visible').slideUp('slow');
			//activeクラス切り替え
			$(this).toggleClass('active');
			$(this).siblings('h3').removeClass('active');

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);


//Accordion
(function($){

	//accordion32
	$(function(){

		//オブジェクトを保存
		var accordionItem=$('#accordion-32');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

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

			//DL要素オブジェクトを代入
			var hitItem = $(this).next();
			//開いている要素
			var openItem = hitItem.siblings('div:visible');

			//開いている要素があれば最初に閉じる
			if (openItem.length) {
				openItem.prev().removeClass('active');
				openItem.slideUp('fast',function() {
					//其の後開く
					hitItem.slideToggle('normal');
				});
			} else {
				//開いている要素が無ければ
				hitItem.slideToggle('normal');
			}

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);




その他のサンプル



accordion 33

開いたままのタイプ。

show/hide 時間設定切り替え

MENUブロック1

MENUブロック2

MENUブロック3


accordion 34

開いたままのタイプ。

fadeToggle

MENUブロック1

MENUブロック2

MENUブロック3


accordion 35

同時開閉タイプ。

slideToggle/slideToggle切り替え

MENUブロック1

MENUブロック2

MENUブロック3


accordion 36

同時開閉タイプ。

active判定slideToggle切り替え

MENUブロック1

MENUブロック2

MENUブロック3


accordion 37

開いたままのタイプ。

active判定slideDown/slideUp

MENUブロック1

MENUブロック2

MENUブロック3


accordion 38

開いた所を閉じて、開くタイプ。

slideToggle

MENUブロック1

MENUブロック2

MENUブロック3


accordion 39

開いた所を閉じて、開くタイプ。

hasClass判定slide (面倒なだけ意味無い)

MENUブロック1

MENUブロック2

MENUブロック3





Accordion Menu サンプル 7種類

accordion33-accordion39、他に、どんな書き方があるか書いて見ただけのサンプルだ。(中にはフェード形式も有るが、無意味に数を増やしただけである。動作確認して置けば使い道もあるカモ)
accordion38-39 は非効率ですので、下段のslideToggleの効率化サンプルを参照ください。動作は同じです。


サンプルJS


//Accordion
(function($){

	//accordion33
	$(function(){

		//jqueryオブジェクト保存と効率化
		var accordionItem=$('#accordion-33');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

			//active切り替え
			$(this).toggleClass('active');
			//表示非表示に時間設定 show hide
			$(this).next('div').toggle('slow');

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);

//Accordion
(function($){

	//accordion34
	$(function(){

		//jqueryオブジェクト保存と効率化
		var accordionItem=$('#accordion-34');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

			//active切り替え
			$(this).toggleClass('active');
			//fadeToggle
			$(this).next('div').fadeToggle('slow');

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);

//Accordion
(function($){

	//accordion35
	$(function(){

		//jqueryオブジェクト保存と効率化
		var accordionItem=$('#accordion-35');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

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

			//対象、残りともslideToggle
			$(this).next('div').slideToggle('slow')
			.siblings('div:visible').slideToggle('slow');
			$(this).siblings('h3').removeClass('active');

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);

//Accordion
(function($){

	//accordion36 active判定
	$(function(){

		//jqueryオブジェクト保存と効率化
		var accordionItem=$('#accordion-36');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

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

			//active判定分岐処理
			if ($(this).hasClass('active')) {
				$(this).next('div').slideToggle('slow')
				.siblings('div:visible').slideUp('slow').prev('h3').removeClass('active');
			} else {
				$(this).next('div').slideUp('slow');
			}
		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);

//Accordion
(function($){

	//accordion37
	$(function(){

		//jqueryオブジェクト保存と効率化
		var accordionItem=$('#accordion-37');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

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

			//activeをhasClass()で判定
			if($(this).hasClass('active')) {
				//開く処理slide
				$(this).next('div').slideDown('slow');
			} else {
				//閉じる処理slide
				$(this).next('div').slideUp('slow');
			}
		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);

//Accordion
(function($){

	//accordion38
	$(function(){

		//jqueryオブジェクト保存と効率化
		var accordionItem=$('#accordion-38');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

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

			var $nextItem=$(this).next();
			var $visibleItem=$nextItem.siblings('div:visible');

			if ($visibleItem.length) {
				$visibleItem.prev().removeClass('active');
				$visibleItem.slideToggle('slow',function() {
					$nextItem.slideToggle('slow');
				});
			} else {
				$nextItem.slideToggle('slow');
			}

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);

//Accordion
(function($){

	//accordion39
	$(function(){

		//jqueryオブジェクト保存と効率化
		var accordionItem=$('#accordion-39');
		//一旦全部消す
		accordionItem.find('div').hide();

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

		//click-action
		accordionItem.find('h3').click(function () {

			//-----------------面倒なだけ意味無い-----------------
			var has=false;
			//押されたアイテムhasClass判定
			if($(this).hasClass('active')) {has=true;}
			var $nextItem=$(this).next();
			var $visibleItem=$nextItem.siblings('div:visible');

			//activeなら
			if(has) {
				//閉じる処理slideUp
				$nextItem.slideUp('slow').prev('h3').removeClass('active');
			}
			//activeで無いなら
			if(!has) {
				//他に開いているものがあれば閉じる
				if ($visibleItem.length) {
					$visibleItem.prev().removeClass('active');
					$visibleItem.slideToggle('slow',function() {
						$nextItem.slideToggle('slow').prev('h3').addClass('active');
					});
				} else {
					$nextItem.slideToggle('slow').prev('h3').addClass('active');
				}
			}

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});
	});

})(jQuery);



slideToggleの効率化



slideToggle効率化サンプル

accordion 40

開いたままのタイプ。

slideToggle切り替え

MENUブロック1

MENUブロック2

MENUブロック3


accordion 41

先に開いて、閉じるタイプ。

slideToggle切り替え

MENUブロック1

MENUブロック2

MENUブロック3


accordion 42

開いた所を閉じて、開くタイプ。

slideToggle切り替え delay処理

MENUブロック1

MENUブロック2

MENUブロック3


accordion 43

同時開閉タイプ。(推奨)

slideToggle切り替え

MENUブロック1

MENUブロック2

MENUブロック3




例、fadeToggle切り替えは合わない

accordion 45

先に開いて、閉じるタイプ。

fadeToggle切り替え

MENUブロック1

MENUブロック2

MENUブロック3





Accordion Menu slideToggleサンプル 4種類

上記、slideToggle関数のサンプルは非効率的な記述ですので、新たに単純効率化したサンプルを掲載します。考えれば色々と書き方はあるものです。2015/04/14/追加


slideToggle関数利用の効率化の記事、サンプルは次を参照ください。但し、ul li で構成しています。2015/04/16/追記

【参照】当方の記事: jQuery slideToggle縦並びアコーディオン

【サンプル、デモ】POPS-BLOG-DEMO-012 slideToggleアコーディオン


slideToggle()利用の効率化したAccordion Menuです。一部siblings()と組み合わせました。
「同時開閉」の方が見易いと思いますが、どうでしょうか。

このサンプルは、初期時、1番目(上段)が開いた状態に設定されています。


accordion-42は「delay関数」を組み合わせた特殊な形態ですが(苦肉の策)、正常に動作します。ここで時間の指定が必要なために、全てのサンプルは時間(ミリ秒)で設定しました。200-600ミリ秒で使用します。
fadeToggle関数に切り替えも可能ですが、このアコーディオン形式には合わないようです。 見た目が悪いのでSlideタイプのみにしました。


accordion40-accordion43、多少効率良くなり早くなる。基本的にこの4種類があれば事足りる。



//Accordion
//accordion-40
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//active要素を指定して開く
		var no=0;

		//----------------------------------
		var accordionItem=$('#accordion-40');//Item

		//MENUブロック一旦非表示
		accordionItem.find('.accordion-block').hide();
		//active要素を指定して開く
		accordionItem.find('h3').eq(no).addClass('active').next('div').show();

		//click-action
		accordionItem.find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			//hit分岐処理
			if ($(this).hasClass('active')) {

				//hitクラスを開く
				slideItem.slideToggle(slide_speed);

			} else {

				//hitクラスを閉じる
				slideItem.slideToggle(slide_speed);
			}

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});

	});

})(jQuery);

//accordion-41
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//active要素を指定して開く
		var no=0;

		//----------------------------------
		var accordionItem=$('#accordion-41');//Item

		//MENUブロック一旦非表示
		accordionItem.find('.accordion-block').hide();
		//active要素を指定して開く
		accordionItem.find('h3').eq(no).addClass('active').next('div').show();

		//click-action
		accordionItem.find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			//hit分岐処理
			if ($(this).hasClass('active')) {

				//hitクラスを開く
				slideItem.slideToggle(slide_speed,function() {

					//hitクラス切り替、開いている要素を閉じる
					var siblingsItem=$(this).siblings('div:visible');
					siblingsItem.slideUp(slide_speed,function() {

						siblingsItem.prev('h3').toggleClass("active");

					});
				});

			} else {

				//hitクラスを閉じる
				slideItem.slideToggle(slide_speed);

			}

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});

	});

})(jQuery);

//accordion-42
//delay処理
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//active要素を指定して開く
		var no=0;

		//----------------------------------
		var accordionItem=$('#accordion-42');//Item

		//MENUブロック一旦非表示
		accordionItem.find('.accordion-block').hide();
		//active要素を指定して開く
		accordionItem.find('h3').eq(no).addClass('active').next('div').show();

		//click-action
		accordionItem.find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			//hit分岐処理
			if ($(this).hasClass('active')) {

				//閉じてからhitクラスを開く/delay処理する
				slideItem.delay(slide_speed).slideToggle(slide_speed).siblings('div:visible').slideToggle(slide_speed,function() {
					$(this).prev('h3').toggleClass("active");
				});


			} else {

				//hitクラスを閉じる
				slideItem.slideToggle(slide_speed);

			}

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});

	});

})(jQuery);

//accordion-43
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//active要素を指定して開く
		var no=0;

		//----------------------------------
		var accordionItem=$('#accordion-43');//Item

		//MENUブロック一旦非表示
		accordionItem.find('.accordion-block').hide();
		//active要素を指定して開く
		accordionItem.find('h3').eq(no).addClass('active').next('div').show();

		//click-action
		accordionItem.find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			//hit分岐処理
			if ($(this).hasClass('active')) {

				//hitクラスを開く同時
				slideItem.slideToggle(slide_speed).siblings('div:visible').slideUp(slide_speed,function() {
					$(this).prev('h3').toggleClass("active");
				});

			} else {

				//hitクラスを閉じる
				slideItem.slideToggle(slide_speed);
			}

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});

	});

})(jQuery);

//accordion-45 fadeToggle
//見た目が悪く合わない
(function($){

	$(function(){

		//速度
		var slide_speed=600;
		//active要素を指定して開く
		var no=0;

		//----------------------------------
		var accordionItem=$('#accordion-45');//Item

		//MENUブロック一旦非表示
		accordionItem.find('.accordion-block').hide();
		//active要素を指定して開く
		accordionItem.find('h3').eq(no).addClass('active').next('div').show();

		//click-action
		accordionItem.find('h3').click(function() {

			//hit判定クラス
			$(this).toggleClass("active");
			var slideItem=$(this).next('div');

			//hit分岐処理
			if ($(this).hasClass('active')) {

				//hitクラスを開く
				slideItem.slideToggle(slide_speed,function() {

					//hitクラス切り替、開いている要素を閉じる
					var siblingsItem=$(this).siblings('div:visible');
					siblingsItem.fadeOut(slide_speed,function() {

						siblingsItem.prev('h3').toggleClass("active");

					});
				});

			} else {

				//hitクラスを閉じる
				slideItem.fadeToggle(slide_speed);

			}

		});

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

			//toggle hoveredクラス
			$(this).toggleClass('hovered');

		});

	});

})(jQuery);




上記サンプルの HTML CSS


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


前のページに掲載の HTML CSS と同じです。


HTML

HTML構造は共通です。#accordion-30の場合の例。IDが違う場合は該当のIDを記入する。


<div id="accordion-30" class="accordion-box">
	<h3>MENUブロック1</h3>
	<div class="accordion-block">
		<dl>
		<dt><a href="javascript:void(0);">リンク</a></dt>
		<dt><a href="javascript:void(0);">リンク</a></dt>
		<dt><a href="javascript:void(0);">リンク</a></dt>
		</dl>
	</div>
	<h3>MENUブロック2</h3>
	<div class="accordion-block">
		<dl>
		<dt><a href="javascript:void(0);">リンク</a></dt>
		<dt><a href="javascript:void(0);">リンク</a></dt>
		<dt><a href="javascript:void(0);">リンク</a></dt>
		</dl>
	</div>
	<h3>MENUブロック3</h3>
	<div class="accordion-block">
		<dl>
		<dt><a href="javascript:void(0);">リンク</a></dt>
		<dt><a href="javascript:void(0);">リンク</a></dt>
		<dt><a href="javascript:void(0);">リンク</a></dt>
		</dl>
	</div>
</div>
<br />

CSS

CSSは共通です。


/* 日本語 */

.accordion-box {
	width:200px;
	height:auto;
	margin:0;
	padding:1px 0;
	text-align:left;
	border-bottom:1px #EEEEEE solid;
	background-color:#EEEEEE;
}

.accordion-box h3 {
	width:188px;
	height:20px;
	margin:1px 0 0 1px;
	padding:2px 0 0 10px;
	line-height:20px;
	color:#FFFFFF;
	font-size:12px;
	background:url(/main/images/arrow_7.gif) no-repeat;
	background-color:#BBBBBB;
	background-position:right 0px;
	cursor:pointer;
}
/* active */
.accordion-box h3.active {
	background-position:right -21px;
}
/* hovered */
.accordion-box h3.hovered {
	background-color:#555555;
}

.accordion-box .accordion-block {
	display:block;
	width:198px;
	margin:1px 0 0 1px;
	padding:0;
	background-color:#FFFFFF;
}
.accordion-box .accordion-block dl {
	list-style-type:none;
	display:inline-block;
	margin-left:10px;
	padding:0;
}
.accordion-box .accordion-block dl dt {
	list-style-type:none;
	width:185px;
	margin-left:0px;
	padding:0;
	text-align:left;
	font-size:12px;
	font-weight:normal;
	line-height:150%;
	border-bottom:1px #CCCCCC solid;
}
.accordion-box .accordion-block dl dt a {
	text-decoration:none;
	color:#BBBBBB;
}

「矢印画像」を使用しない時は、CSSを変更ください。JSの方は変更しないでください。
当方のCSSです、画像パスなどは環境に合わせます。


active要素を指定して開く

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


最初がこのようであれば
var accordionItem=$('#accordion-30');

位置の番号を記入
//active要素を指定して開く
var no=0;
accordionItem.find('h3').eq(no).addClass('active').next('div').show();

これと同じです
$('#accordion-30').find('h3').eq(no).addClass('active').next('div').show();

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

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

//accordionItem.find('h3').eq(no).addClass('active').next('div').show();

画像

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

透過矢印画像 arrow.gif 21x44 透過矢印画像 arrow_2.gif 20x44 透過矢印画像 arrow_7.gif 19x40 透過矢印画像 arrow_5gif 19x40

 

以上。

 

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