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


jQuery slideToggleアコーディオン


[jquery] 2015/04/16
toggleクリック関数を使用しないアコーディオン Accordion(clickタイプ)で、slideToggle関数を使用して「単純効率化」したものです。少し書き方を違わせたものも掲載しました。
今回は、リストを ul li で記述してみました。

● [ タイトル要素を指定してアコーディオン化する簡単な方法 ]は記事ページ最終段を参照ください。


DEMO12 jQuery slideToggleアコーディオン単純効率化サンプル


Example

このデモページは[jqury-1.9]で動作しています。
このサンプルは、jqury-2.0系にも対応出来ます。(jqury-1.9.0 jqury-2.0.1、で動作確認済み)
IE9-11、Chrome Firefox Opera でOK、Mac未確認。但し昨今のブラウザ事情によりIE8除外します。(可動します)

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


slideToggleサンプル1



 

● accordion-sib01

1. 開いたままのタイプ。手動で閉じる

Slide 切り替え

MENUブロック1

TEST-DIV-エリア
何でも書けるDIV部分です

リンク

MENUブロック2

MENUブロック3




 

● accordion-sib02

2. 開いてから閉じるタイプ。伸縮大きい

Slide 切り替え

MENUブロック1

TEST-DIV-エリア

MENUブロック2

MENUブロック3




 

● accordion-sib03

3 閉じてから開くタイプ。伸縮大きい

Slide 切り替え/delay処理

MENUブロック1

TEST-DIV-エリア

MENUブロック2

MENUブロック3




 

● accordion-sib04

4. 同時開閉タイプ1/効率よし

Slide 切り替え

MENUブロック1

TEST-DIV-エリア

MENUブロック2

MENUブロック3




 

● accordion-sib04b

4. 同時開閉タイプ1改/タイトル背景着色

Slide 切り替え

MENUブロック1

TEST-DIV-エリア

MENUブロック2

MENUブロック3

MENUブロック4

MENUブロック5




 

● accordion-sib05

同時開閉タイプ拡張サンプル

Slide 切り替え

固定MENU

TEST-DIV-エリア
何でも書けるDIV部分です

MENUブロック1

TEST-DIV-エリア
何でも書けるDIV部分です

SUB-TITLE1

SUB-TITLE2

SUB-TITLE3

SUB-TITLE4

MENUブロック2

MENUブロック3

固定MENU

TEST-DIV-エリア
何でも書けるDIV部分です



 

● hover-accordion

Hoverタイプは1種類のみ。
OPEN箇所は処理しません。

Slide 切り替え

MENUブロック1

TEST-DIV-エリア
何でも書けるDIV部分です

リンク

MENUブロック2

MENUブロック3

MENUブロック4





Accordion Menu サンプル 4種類


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


accordion-sib01 - accordion-sib04、CLICKタイプは基本的にこの4種類があれば事足りる。
accordion-sib05は応用拡張形、hover-accordion、Hoverタイプは1種類のみ、CLICKタイプと比較して使い難いと思う。




//01-開いたままのタイプ/手動で閉じる
(function($){

	$(function(){

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

		//----------------------------------
		var accordItem=$('#accordion-sib01');//Item

		//MENUブロック
		accordItem.find('.accordion-sib-block').each(function(i) {
			//一旦非表示
			$(this).hide();
		});

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

		//click-action
		accordItem.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
		accordItem.find('h3').hover(function () {

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

		});

	});

})(jQuery);

//02-開いてから閉じるタイプ
(function($){

	$(function(){

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

		//----------------------------------
		var accordItem=$('#accordion-sib02');//Item

		//MENUブロック
		accordItem.find('.accordion-sib-block').each(function(i) {
			//一旦非表示
			$(this).hide();
		});

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

		//click-action
		accordItem.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
		accordItem.find('h3').hover(function () {

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

		});

	});

})(jQuery);

//03-閉じてから開くタイプ
//delay処理
(function($){

	$(function(){

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

		//----------------------------------
		var accordItem=$('#accordion-sib03');//Item

		//MENUブロック
		accordItem.find('.accordion-sib-block').each(function(i) {
			//一旦非表示
			$(this).hide();
		});

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

		//click-action
		accordItem.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
		accordItem.find('h3').hover(function () {

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

		});

	});

})(jQuery);

//04-同時開閉タイプ1/効率よし。
(function($){

	$(function(){

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

		//----------------------------------
		var accordItem=$('#accordion-sib04');//Item

		//MENUブロック
		accordItem.find('.accordion-sib-block').each(function(i) {
			//一旦非表示
			$(this).hide();
		});

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

		//click-action
		accordItem.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
		accordItem.find('h3').hover(function () {

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

		});

	});

})(jQuery);

//05-同時開閉タイプ2
(function($){

	$(function(){

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

		//----------------------------------
		var accordItem=$('#accordion-sib05');//Item

		//subMENUブロック非表示
		$('.sub-accordion').each(function(i) {
			$(this).hide();
		});

		//MENUブロック
		accordItem.find('.accordion-sib-block').each(function(i) {
			//一旦非表示
			$(this).hide();
		});

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


		//click-action
		accordItem.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);
			}

		});

		//click-action-2
		accordItem.find('h4').click(function () {

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

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

		});

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

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

		});

	});

})(jQuery);

//06-開いたままのタイプ/HOVER
(function($){

	$(function(){

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

		//----------------------------------
		var accordItem=$('#accordion-sib06');//Item

		//MENUブロック
		accordItem.find('.accordion-sib-block').each(function(i) {
			//一旦非表示
			$(this).hide();
		});

		//active要素を指定して開く
	
		accordItem.find('h3').eq(no).addClass('active').next('div').show();
		accordItem.find('.accordion-wrap').eq(no).addClass('open');

		//click-action
		accordItem.find('.accordion-wrap').hover(function() {

			//openクラスは処理しない
			if ($(this).hasClass('open')) {
				return false;
			}

			//hit判定クラス
			$(this).toggleClass("active");
			var titleItem=$(this).find('h3');
			titleItem.toggleClass("active");
			var slideItem=$(this).find('div.accordion-sib-block');

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

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


			} else {

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

		});

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

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

		});

	});

})(jQuery);



slideToggleサンプル2



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関数のサンプルと同じ単純効率化したデザインを変えたサンプルです。非効率のものは下の「その他」参照、考えれば色々と書き方はあるものです。


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


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

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

accordion-42は「delay関数」を組み合わせた特殊な形態ですが(苦肉の策)、正常に動作します。ここで時間の指定が必要なために、全てのサンプルは時間(ミリ秒)で設定しました。
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


slideToggleサンプル1


HTML

accordion-sib01 - accordion-sib05、hover-accordion、HTML構造は共通です。IDが違う場合は該当のIDを記入する。



accordion-sib01
1. 開いたままのタイプ。手動で閉じる
<div id="accordion-sib01" class="accordion-sib-box">
	<h3 class="accordion-sib-title">MENUブロック1</h3>
	<div class="accordion-sib-block">
		<div>TEST-DIV-エリア<br />何でも書けるDIV部分です<br /><p><a href="javascript:void(0);">リンク</a></p></div>
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック2</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック3</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

accordion-sib02
2. 開いてから閉じるタイプ
<div id="accordion-sib02" class="accordion-sib-box">
	<h3 class="accordion-sib-title">MENUブロック1</h3>
	<div class="accordion-sib-block">
		<div>TEST-DIV-エリア</div>
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック2</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック3</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

accordion-sib03
3 閉じてから開くタイプ
<div id="accordion-sib03" class="accordion-sib-box">
	<h3 class="accordion-sib-title">MENUブロック1</h3>
	<div class="accordion-sib-block">
		<div>TEST-DIV-エリア</div>
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック2</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック3</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

accordion-sib04
4. 同時開閉タイプ1
<div id="accordion-sib04" class="accordion-sib-box">
	<h3 class="accordion-sib-title">MENUブロック1</h3>
	<div class="accordion-sib-block">
		<div>TEST-DIV-エリア</div>
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック2</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック3</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

accordion-sib04b
4. 同時開閉タイプ1改/タイトル背景着色
<div id="accordion-sib04b" class="accordion-sib-box radius2">
	<h3 class="accordion-sib-title radius">MENUブロック1</h3>
	<div class="accordion-sib-block">
		<div>TEST-DIV-エリア</div>
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title radius">MENUブロック2</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title radius">MENUブロック3</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title radius">MENUブロック4</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title radius">MENUブロック5</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

accordion-sib05
同時開閉タイプ拡張サンプル
<div class="accordion-sib-box">
	<h3 class="sub-title">固定MENU</h3>
	<div class="accordion-sib-block">
		<div>TEST-DIV-エリア<br />何でも書けるDIV部分です<br /></div>
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

<div id="accordion-sib05" class="accordion-sib-box">
	<h3 class="accordion-sib-title">MENUブロック1</h3>
	<div class="accordion-sib-block">
		<div>TEST-DIV-エリア<br />何でも書けるDIV部分です<br /></div>
		<h4 class="sub-accordion-title">SUB-TITLE1</h4>
		<ul class="sub-accordion">
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
		<h4 class="sub-accordion-title">SUB-TITLE2</h4>
		<ul class="sub-accordion">
		<a style="margin-left:5px;" href="javascript:void(0);"><img src="/main/images/menu_image.gif" /></a>
		</ul>
		<h4 class="sub-accordion-title">SUB-TITLE3</h4>
		<ul class="sub-accordion">
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
		<h4 class="sub-accordion-title">SUB-TITLE4</h4>
		<ul class="sub-accordion">
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック2</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="accordion-sib-title">MENUブロック3</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>

</div>
<div class="accordion-sib-box">
	<h3 class="sub-title">固定MENU</h3>
	<div class="accordion-sib-block">
		<div>TEST-DIV-エリア<br />何でも書けるDIV部分です<br /></div>
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<div class="align-center"><img src="/main/images/lady01.png" /></div>
</div>

hover-accordion
Hoverタイプ
<div id="accordion-sib06" class="accordion-sib-box">
<div class="accordion-wrap">
	<h3 class="accordion-sib-title">MENUブロック1</h3>
	<div class="accordion-sib-block">
		<div>TEST-DIV-エリア<br />何でも書けるDIV部分です<br /><p><a href="javascript:void(0);">リンク</a></p></div>
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>
<div class="accordion-wrap">
	<h3 class="accordion-sib-title">MENUブロック2</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>
<div class="accordion-wrap">
	<h3 class="accordion-sib-title">MENUブロック3</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>
<div class="accordion-wrap">
	<h3 class="accordion-sib-title">MENUブロック4</h3>
	<div class="accordion-sib-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>
</div>

CSS

CSSは共通です。


/* accordion-sib01.css 日本語 */

/* NO.1-6 共通 */

/* menu-block */
.accordion-sib-box{
display:block;
width:200px;
height:100%;
padding:1px;
border:1px #EEEEEE solid;
background-color:#FFFFFF;
}

/* title-box */
.accordion-sib-box h3.accordion-sib-title{
width:auto;
height:25px;
padding:0 15px 0 10px;
font-size:13px;
color:#FFFFFF;
line-height:25px;
border-bottom:1px #FFFFFF solid;
background:url(/main/images/arrow_5.gif) no-repeat;
background-position:right 2px;
background-color:#48D1CC;
cursor:pointer;
}

/* title-box2 */
.accordion-sib-box h3.sub-title{
width:auto;
height:25px;
padding:0 15px 0 10px;
font-size:13px;
color:#FFFFFF;
line-height:25px;
border-bottom:1px #FFFFFF solid;
background-color:#4682B4;
}

.accordion-sib-box .accordion-sib-block{
display:block;
width:auto;
height:100%;
padding:0 2px 0 2px;
background-color:#FFFFFF;
}

/* TEST-DIV-エリア */
.accordion-sib-box .accordion-sib-block div{
display:block;
width:auto;
padding:2px;
font-size:10px;
background-color:#EEEEEE;
}

/* lightpink#FFB6C1.lightseagreen#20B2AA.hotpink#FF69B4 */
.accordion-sib-box h3.active{
background-position:right -18px;
background-color:#FF69B4;
}

.accordion-sib-box .accordion-sib-block ul {
display:inline-block;
list-style:none;
width:auto;
margin-left:5px;
padding:0;
}
.accordion-sib-box .accordion-sib-block ul li{
list-style:none;
width:auto;
height:16px;
margin:2px 5px 0 1px; 
padding:0;
border-bottom:1px #EEEEEE solid;
line-height:16px;
font-size:12px;
color:#555555;
}

/* aLink-hover */
.accordion-sib-box .accordion-sib-block ul li a:hover {
background-color:#F0F0F0;
}
/* h3-hovered */
.accordion-sib-box h3.accordion-sib-title.hovered {
	background-color:#555555;
}
/* hover */
#accordion-sib05 .accordion-wrap{
width:auto;
padding:0;
margin:0;
}

/* sub-title-box */
.accordion-sib-box h4.sub-accordion-title{
width:auto;
height:20px;
padding:0 2px 0 2px;
font-size:12px;
color:#FFFFFF;
line-height:20px;
border-bottom:1px #FFFFFF solid;
background:url(/main/images/arrow_12.gif) no-repeat;
background-position:right 3px;
background-color:#AAAAAA;
cursor:pointer;
}
.accordion-sib-box h4.active{
background-position:right -22px;
background-color:#BBBBBB;
}

/* 角丸 */
.radius2 {
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
-o-box-border-radius:7px;
-ms-border-radius:7px;
}
.radius {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-box-border-radius:5px;
-ms-border-radius:5px;
}

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


 

slideToggleサンプル2


HTML

accordion40-accordion45、HTML構造は共通です。IDが違う場合は該当のIDを記入する。



accordion 40
開いたままのタイプ
<div id="accordion-40" class="accordion-box">
	<h3 class="textshadow">MENUブロック1</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック2</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック3</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

accordion 41
先に開いて、閉じるタイプ
<div id="accordion-41" class="accordion-box">
	<h3 class="textshadow">MENUブロック1</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック2</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック3</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

accordion 42
開いた所を閉じて、開くタイプ
<div id="accordion-42" class="accordion-box">
	<h3 class="textshadow">MENUブロック1</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック2</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック3</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

accordion 43
同時開閉タイプ
<div id="accordion-43" class="accordion-box">
	<h3 class="textshadow">MENUブロック1</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック2</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック3</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

accordion 45
fadeToggle 先に開いて、閉じるタイプ
<div id="accordion-45" class="accordion-box">
	<h3 class="textshadow">MENUブロック1</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック2</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
	<h3 class="textshadow">MENUブロック3</h3>
	<div class="accordion-block">
		<ul>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		<li><a href="javascript:void(0);">リンク</a></li>
		</ul>
	</div>
</div>

CSS

CSSは共通です。


/* accordion-001c.css 日本語 */

/*accordion-001c ul ii 用*/
.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_13.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:#DAA520;
}

.accordion-box .accordion-block {
display:block;
width:198px;
margin:1px 0 0 1px;
padding:0;
background-color:#FFFFFF;
}

.accordion-box .accordion-block ul {
display:inline;
list-style:none;
margin:0;
padding:0;
}
.accordion-box .accordion-block ul li{
list-style:none;
width:190px;
height:16px;
margin-left:5px;
padding:0;
border-bottom:1px #EEEEEE solid;
line-height:16px;
font-size:12px;
color:#555555;
}

.accordion-box .accordion-block ul li a {
text-decoration:none;
color:#BBBBBB;
}
/* text-shadow*/
.textshadow{
text-shadow:1px 1px 3px #000000;
}

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


 

その他

[slideToggleサンプル1]、accordion-sib04-同時開閉タイプ1、accordion-sib05-同時開閉タイプ2、の場合に下記のスクリプトでも動作します。
単純化されていませんので使用していません。色々な書き方があると言う訳です。


//旧控え効率悪るし
//04-同時開閉タイプ1
(function($){

	$(function(){

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

		//----------------------------------
		var accordItem=$('#accordion-sib04');//Item

		//MENUブロック
		accordItem.find('.accordion-sib-block').each(function(i) {
			//一旦非表示
			$(this).hide();
		});

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

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

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

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

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

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

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

				});

			} else {

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

		});

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

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

		});

	});

})(jQuery);

//05-同時開閉タイプ2
(function($){

	$(function(){

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

		//----------------------------------
		var accordItem=$('#accordion-sib05');//Item

		//subMENUブロック非表示
		$('.sub-accordion').each(function(i) {
			$(this).hide();
		});

		//MENUブロック
		accordItem.find('.accordion-sib-block').each(function(i) {
			//一旦非表示
			$(this).hide();
		});

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


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

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

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

				//MENUブロック
				accordItem.find('.accordion-sib-block').each(function() {
					//全て閉じる
					$(this).slideUp(slide_speed).prev('h3').removeClass("active");
				});
				//hitを開く
				slideItem.addClass("active");
				slideItem.slideToggle(slide_speed);
				slideItem.prev('h3').addClass("active");

			} else {

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

		});

		//click-action-2
		accordItem.find('h4').click(function () {

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

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

		});

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

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

		});

	});

})(jQuery);

 

画像

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

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

 

以上。

 

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