POPSブログ

jQuery 簡単にWordPress等のCMSサイドバーをアコーディオンにする

355

  Category:  jquery2015/04/25 pops 

WordPress等のCMS、サイドバー等に限らず指定箇所のコンテンツなどを簡単にアコーディオン化する方法です。toggleクリック関数を使用しないアコーディオンですからjquery-1.9系、jquery-2.0系でも動作します。
単純効率化して「同時開閉」などの動作をアレンジしたものも作ってみました。

 

jQuery 簡単にWordPress等のCMSサイドバーをアコーディオンにするテスト

当方のアコーディオンはオリジナルのものが主で、規定の構造で動作するものでした。今回は、WordPress等のCMSサイドバーをアコーディオン化するもので、記事中のコンテンツをアコーディオン化することも可能です。
原則「個別開閉タイプ」ですが「同時開閉タイプ」他も作ってみました。

 

nisemono

 

このページは、前ページ記載の[タイトル要素を指定してアコーディオン化する簡単な方法]のCMS用途に複数タイトル部分(ブロック)に設定する例です。
記事が重複しますが、詳細は前ページ参照ください。jQuery slideToggle縦並びアコーディオン

 

[ 目次 ]

 

1. アコーディオン化する時の基本原則
2. 「個別開閉」タイプのアコーディオン
3. 「同時開閉連動タイプ」タイプのアコーディオン
4. 簡単な説明とHTML.JS
5. JSの設定(ほぼ共通)
6. 実際のWordPress構造でのデモ
7. 当方での使用例

 

 

アコーディオン化する時の基本原則


アコーディオン化するものはほとんどがリスト部分になりますので、下記のような構造になっている事が条件です。
タイトルなどの直下が ul div または dt である事です。ほとんどのCMSはこの様になっています。

タイトルは h1-h4 とCMSによってマチマチですが、最近はwidgetタイプの作りが多くなり、divでラップされた構造になっています。「個別開閉タイプ」は問題無いが「同時開閉タイプ」等を作るのが困難です。



<h3></h3>
<ul></ul>

<h3></h3>
<div></div>

<div class="widget">
<h3></h3>
<ul></ul>
</div>


タイトルにアクションを与えて、直下の ul要素を開閉させます。原則、事前にタイトル要素にオリジナルのクラスを与えておきます。スクリプトで探し出してクラスを与える事も出来ます(あとで別項目で説明します)。


クラス名はバッテングしない様にオリジナルの呼称にすることが重要です。
例えば、rassun-gorerai、ho-hokekyo、oisii-nama-beer、などがお勧めです。


<h3 class="xxxxx-accordion">最近の投稿</h3>

JS処理の例。


ulを指定して処理
$(function(){
	$('.xxxxx-accordion').next('ul').hide();
	$('.xxxxx-accordion').click(function(){
		$(this).next('ul').slideToggle(400);
	});
});

指定がないので ul div dt でもOK
$(function(){
	$('.xxxxx-accordion').next().hide();
	$('.xxxxx-accordion').click(function(){
		$(this).next().slideToggle(400);
	});
});

追加でクラス名を与えるのも簡単です。下記では、開けばタイトルに active クラスが与えられ、閉じれば削除去れます。クラス名は任意の呼称が使えます。


$(function(){
	$('.xxxxx-accordion').next('ul').hide();
	$('.xxxxx-accordion').click(function(){
		$(this).toggleClass("active");
		$(this).next('ul').slideToggle(400);
	});
});

スライド(アニメーション)速度は 200-600 です。遅いほど負荷がかかります。文字形指定 fast、normal、slow、でも構いません。それぞれ 200 400 600ミリ秒に対応します。(留意すべくは、遅くが600ミリ秒だと言うこと)


.slideToggle('normal')
.slideToggle(400)

slideToggleは上下スライドです、fadeToggleはフエード、はshow()hide()も可能です。slideToggleが一番綺麗です。


$(this).next().slideToggle(400);//上下スライド

$(this).next().slideToggle(400);//フエード

$(this).next().toggle(400);//横スライドとフエード

onイベントを使う。jQuery1.7系以上で利用できます。このページは1.6.4のため使用できません。


$('.xxxxx-accordion').on('click',function(){
	//
});

「個別開閉」タイプのアコーディオン


アコーディオンを設定したブロックのみ交互に開閉させます。作るのが一番簡単でシンプルです。


Sidebar用アコーディオン1

 

個別開閉タイプ「MENUタイトル」をクリック ください開閉します。このページはjquery-1.6.4に成ります。

Sidebar用ですが、下のサンプルの様にSide以外にも設定できますが、出来れば「Sidebar専用」「ページの記事専用」と2種類作った方が良いと思います。(このデモでは1つのJSで、全て同じクラスをあたえています)

JSの初期設定などは「同時開閉連動タイプ」と同じですから、下の[ JSの設定(ほぼ共通) ]を参照ください。

slideToggle

定番記事

  • 定番記事1
  • 定番記事2
  • 定番記事3
  • 定番記事4
  • 定番記事5
  • 定番記事6

最近の投稿

  • 投稿記事1
  • 投稿記事2
  • 投稿記事3
  • 投稿記事4
  • 投稿記事5
  • 投稿記事6

TAGクラウド

cloud

カテゴリー

  • カテゴリー1
  • カテゴリー2
  • カテゴリー3
  • カテゴリー4
  • カテゴリー5
  • カテゴリー6

月別アーカイブ

  • 紀元前2015年1月(10)
  • 紀元前2015年2月(5)
  • 紀元前2015年3月(8)
  • 紀元前2015年4月(12)
  • 紀元前2015年5月(8)
  • 紀元前2015年6月(15)

左の「サイドバーエリア」の青いタイトル部分に「個別開閉タイプ」アコーディオンを設定しています。


1. 左のサンプル「最近の投稿」「カテゴリー」「月別アーカイブ」を押せば開いてリストを表示します。もう一度押せば閉じます。


2. 下の「TEST用サブタイトル」はサイドバーエリア外にアコーディオンを設定しています。(clickして下さい)


TEST用サブタイトル1


  • TEST用説明1
  • TEST用説明2
  • TEST用説明3
  • TEST用説明4
  • TEST用説明5
  • TEST用説明6
    任意のコンテンツなどに設定可能です。

 

TEST用サブタイトル2

DIV要素もアコーディオン設定出来ます。

cat

「同時開閉連動タイプ」タイプのアコーディオン


複数のブロックを集合して使用します。一方が開けば一方が閉じる連動タイプで、「同時開閉」「開いてから閉じる」「閉じてから開く」の3種類が考えられます。ここでは「同時開閉」を扱います。作るのが少々面倒になります。
オリジナルの構成アコーディオンで無く、既存の部分をアコーディオン化するものですから、アコーディオン設定するタイトルにクラスを設定します。
出来れば、複数のブロックを同じ所にまとめますと使用し易く効果があります。


Sidebar用アコーディオン2

 

同時開閉連動タイプ「MENUタイトル」をクリック ください開閉します。このページはjquery-1.6.4に成ります。

まとまった所で使用すれば効果的なので、出来れば「Sidebar専用」で作ります。ページの記事での使用が余り無いでしょう。(このデモでは1つのJSで、全て同じクラスをあたえています)

slideToggle

左の「サイドバーエリア」のタイトル部分に「同時開閉連動タイプ」アコーディオンを設定していますので、青いタイトルをクリックして下さい。

「TAGクラウド」を表示ください。ブロックが離れた場合の開閉振る舞いが判ります。
他のサイドバーエリア外のものと一緒に使用した場合の振る舞いもわかります。


1. 左のサンプル「最近の投稿」と「カテゴリー」の間に「TAGクラウド」を表示します。(初期時は非表示)

● Cloud表示切替 : 表示 非表示


2. 下の「TEST用サブタイトル」はサイドバーエリア外にアコーディオンを設定しています。(clickして下さい)


TEST用サブタイトル


  • 1. 一箇所にまとまった方が良い。
  • 2. ブロックの高さが同じに近い方が良い。
  • 3. 冷蔵庫で冷やすとおいしい。
  • 4. 賞味期限が切れているが、正露丸で大丈夫。
  • 5. 紀元前のものでミイラ化したアコーディオンだ。
  • サイドバーエリア外であっても連動します。(変態アコーディオン)

簡単な説明とHTML.JS


JS処理が以前の方法と違いますのでどのようなCMSであっても設置できると思います。


// JS処理が以前の方法と違います //

CMS等では構造がマチマチなので、.siblings()を利用できません。よって判定方法などをかえました。


1. 開くために「クリック」されるのは必ず、どこかのタイトル要素1箇所である。
2. よって開いたタイトル要素のオブジェクトを保存しておき、判定と操作に利用する。
3. 複数個設定すれば連動形のアコーディオンを構成できます。
4. 条件分岐のためactiveクラスを使用しています。(問題があるなら名前を変更する)


「個別開閉タイプ」のHTML JS


同じページに表示するため、ID等一部違わせていますが、基本的に「同時開閉連動タイプ」と同じです。

仮に、下記の様になっていたとする。タイトルに「xxxxx-accordion2」クラスなりの定めるクラスを書き込むのが理想であるが、ここではJS側で処理してみる。

アコーディオンを設定するタイトル(h3)に個別のクラスがあれば良いが、ここでは無いので上の div の ID または クラス を基準にする。


HTML


<div id="sidebar2">
<div id="widget-pickup2" class="widget-block pickup-entries1">
	<h3 class="padding_gray">定番記事</h3>
	<ul>
	<li>定番記事1</li>

	</ul>
</div>
<div id="widget-recent2" class="widget-block recent-entries1">
	<h3 class="padding_gray">最近の投稿</h3>
	<ul>
	<li>投稿記事1</li>

	</ul>
</div>
<div id="widget-cloud2" class="widget-block cloud-erea">
	<h3 class="padding_gray">TAGクラウド</h3>
	<div>

	</div>
</div>
<div id="widget-side5" class="widget-block categories-archives1">
	<h3 class="padding_gray">カテゴリー</h3>
	<ul>
	<li>カテゴリー1</li>

	</ul>
</div>
<div id="widget-side6" class="widget-block monthly-archives1">
	<h3 class="padding_gray">月別アーカイブ</h3>
	<ul>
	<li>紀元前2015年1月(10)</li>

	</ul>
</div>
</div>

JS

基本的に、toggleClass(”active”)は無くとも良いのですが、あればCSS操作が出来るので結構便利です(クラス名は自由)。アコーディオンを設定したブロックのみ交互に開閉させます。作るのが一番簡単でシンプルです。



//個別開閉2
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//MENUブロック指定クラス名付加/MENUブロック一旦非表示
		var accord_itme=$('#widget-recent2,#widget-side5,#widget-side6').find('h3').addClass("wp-accordion2");
		$('#contents-sub-title2').find('h4').addClass("wp-accordion2");

		var accord_itme=$('.wp-accordion2');
		accord_itme.css({'cursor':'pointer'});
		accord_itme.next().hide();

		//click-action
		accord_itme.click(function() {

			$(this).toggleClass("active");
			$(this).next().slideToggle(slide_speed);//縦スライド綺麗

		});
	});

})(jQuery);

 

「同時開閉連動タイプ」のHTML JS


HTML

仮に、下記の様になっていたとする。タイトルに「xxxxx-accordion」クラスなりの定めるクラスを書き込むのが理想であるが、ここではJS側で処理してみる。

アコーディオンを設定するタイトル(h3)に個別のクラスがあれば良いが、ここでは無いので上の div の ID または クラス を基準にする。



<div id="sidebar">
<div id="widget-pickup" class="widget-block pickup-entries1">
	<h3 class="padding_gray">定番記事</h3>
	<ul>
	<li>投稿記事1</li>

	</ul>
</div>
<div id="widget-recent" class="widget-block recent-entries1">
	<h3 class="padding_gray">最近の投稿</h3>
	<ul>
	<li>投稿記事1</li>

	</ul>
</div>
<div id="widget-cloud" class="widget-block cloud-erea">
	<h3 class="padding_gray">TAGクラウド</h3>
	<div>

	</div>
</div>
<div id="widget-side1" class="widget-block categories-archives1">
	<h3 class="padding_gray">カテゴリー</h3>
	<ul>
	<li>カテゴリー1</li>

	</ul>
</div>
<div id="widget-side2" class="widget-block monthly-archives1">
	<h3 class="padding_gray">月別アーカイブ</h3>
	<ul>
	<li>紀元前2015年1月(10)</li>

	</ul>
</div>
</div>

JS

開閉を操作するに、開いたタイトルのオブジェクトを保存して使用する事になる。keep_openItem は保存用変数。
ブロックが離れていても「同時開閉」処理できますから、私としてこれからのJSの書き方が劇的に変わる。
以下そのスクリプトを掲示する。(開いてから閉じる、閉じてから開くは保存値の判定で作れる)


「同時開閉」は他に、toggleClass() を設定して判定しないと作れませんでした。



//同時開閉1
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		var keep_openItem;

		//MENUブロック指定クラス名付加/MENUブロック一旦非表示
		var accord=$('#widget-recent,#widget-side1,#widget-side2').find('h3').addClass("wp-accordion");

		var accord_itme=$('.wp-accordion');
		accord_itme.css({'cursor':'pointer'});
		accord_itme.next().hide();

		//click-action
		$('.wp-accordion').click(function(){

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

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

				//開いていればさきに閉じる
				if(keep_openItem) {
					keep_openItem.slideUp(slide_speed,function() {
						//activeクラス切り替
						keep_openItem.prev().removeClass("active");
					});
				}

				//開く
				slideItem.slideToggle(slide_speed,function() {
					//openItem保存
					keep_openItem=slideItem;
				});

			}
			if (!$(this).hasClass('active')) {

				//閉じる
				slideItem.slideToggle(slide_speed);
				//openItemクリア
				keep_openItem=null;
			}

		});

	});

})(jQuery);

JSの設定(ほぼ共通)


「個別開閉」「同時開閉」でに少し違いがあるのは、同じページに掲載したためです。本来は同じです。
JS先頭の処理もまったく同じになりますので、下記を参照ください。


● ID、#widget-recent #widget-side1 #widget-side2 を利用すれば、(クラスからでは少し違います)

CMSによってIDは違います。下記サンプルにつけたID名です。


h3を走査する
var accord=$('#widget-recent,#widget-side1,#widget-side2').find('h3');
accord.addClass("wp-accordion");
纏めると
var accord=$('#widget-recent,#widget-side1,#widget-side2').find('h3').addClass("wp-accordion");

デモでは h3 です、CMSが h2 なら修正ください
..find('h2')..

● クラス、recent-entries1 categories-archives1 monthly-archives1 を利用すれば、(クラスからでは少し違います)

CMSによってクラス名は違います。下記サンプルにつけたクラス名です。


h3を走査する
$('.recent-entries1,.categories-archives1,.monthly-archives1').find('h3').addClass("wp-accordion");

● jQueryオブジェクトを保存して、cursor変更、タイトル直下を非表示にする。このcursor、非表示処理をCSSでするなら、JSでの処理はいらない。

事前にサイドバーのタイトルにクラス名、ここでは wp-accordion を記載していれば、上記の走査は不要。


var accord_itme=$('.wp-accordion');
accord_itme.css({'cursor':'pointer'});
accord_itme.next().hide();

ul に特定するなら
accord_itme.next('ul').hide();

● スライドするul要素をCSS側で非表示する場合は.next().hide()の処理はいりませんが、JSでの処理より面倒になり、ブラウザにHTMLが表示される時動きません。JSはHTMLが表示されてから処理されるため該当箇所が動く欠点があります。
CSSは旨く設定しないと非表示になりません。その点JSは簡単です。好みの問題でしょう。


.recent-entries1 ul{
display:none;
}

● 定めたクラス .wp-accordion に対してアコーディオン設定を処理する。クラス名は自由です。


サイドバー以外であってもクラス名をつければ処理できる
$('.wp-accordion').click(function(){
	//処理
});

$('.wp-accordion')オブジェクトを保存しているので、下記でも良い
accord_itme.click(function(){
	//処理
});

● IDで走査の場合のみ、下記の様にも出来るがマチガイ易い。accordは保存オブジェクト。(クラス走査はだめ)

この場合は、#widget-recent,#widget-side1,#widget-side2が動作する。


accord.click(function(){
	//処理
});

● 判定用のクラス(名前は何でも良い)をつけて、スライドアイテムを探す。.next()であるから ul 以外でも設定できる。


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

ulに特定するなら
var slideItem=$(this).next('ul');

● 稀ではあるが、以下のようで設定できるCMSもある。事前にアコーディオン化出来る所を想定して設計しているからと思いますが、通常はそうはいきません。


$('#sidebar').find('h3').addClass("wp-accordion");

タイトル部分を見つけ出す走査(セレクタ、基本フィルタ処理など)については下記の記事などで勉強して下さい。

【参考】allabout jQueryの魔法: jQueryのセレクタ

 

 

サイドバー以外での使用

[サイドバー以外での使用説明] Clickして下さい


ページの記事中で利用するならば、JSに使用しているクラスを設定すれば利用できます。
記事の中では、クラス名を加えることは容易ですから、詳細の説明はしません。但し、サイドバー用、他の用途と違ったJSにしたほうがマチガイが少なくなると思います。
どちらにしろ原則、タイトル要素などの直下に ul div または dt がある事です。



<p class="wp-accordion2"><strong> [サイドバー以外での使用説明]</strong> Clickして下さい</p>


 

実際のWordPress構造でのデモ

当方はWordPressでは有りませんので、WordPress構造サイドバーを模したページでシミュレーションしてみます。
「個別開閉」「同時開閉」「開いてから閉じる」「閉じてから開く」の4種類の状動作が確認できます。


● デモページは [ jqury-1.9 ] で動作しています。JS、は「デモ」ページに掲載しています。

DEMO-013

 

 

当方での使用例

当方もCMSであるが、タイトル背景に下記のような画像を使用しポジションをずらして切り替えていますが、activeクラスだけでは処理出来ないために、下記の様に open close クラスを追加して矢印を変化させました。

 

iya

 

● 個別開閉、タイトルラップのdivに widget-slide を書いているので、判定して side-accordion クラスを追加して動かしてみた。可動しました。


(function($){

	//NEWslide-accordion/個別開閉
	$(function(){

		$('.widget-slide').find('h2').addClass("side-accordion").addClass('close').css({'cursor':'pointer'});
		$('.widget-slide').find('h2').next('ul').hide();

		$('.side-accordion').click(function(){

			$(this).toggleClass("active");
			var slideItem=$(this);

			//hit分岐処理
			if ($(this).hasClass('active')) {
				//hitクラスを開く
				slideItem.next('ul').slideToggle(600);
				slideItem.removeClass('close').addClass('open');

			} else {
				//hitクラスを閉じる
				slideItem.next('ul').slideToggle(600);
				slideItem.removeClass('open').addClass('close');
			}

		});
	});

})(jQuery);

● 同時開閉、CMS固有のクラスで走査して、side-accordion クラスを追加して動かしてみた。ページ右のサイドバーです。可動します。
可動しました。


(function($){

	//NEWslide-accordion/同時開閉
	$(function(){

		var slide_speed=400;
		var keep_openItem;
		$('.widget-blog-categories-archives,.widget-blog-monthly-archives,.widget-blog-yearly-archives').find('h2').addClass("side-accordion");
		var accord_itme=$('.side-accordion').addClass('close').css({'cursor':'pointer'});
		accord_itme.next('ul').hide();

		//click-action
		accord_itme.click(function(){
			$(this).toggleClass("active");
			var slideItem=$(this).next('ul');

			if ($(this).hasClass('active')) {
				if(keep_openItem) {
					keep_openItem.slideUp(slide_speed,function() {
						keep_openItem.prev('h2').removeClass("active");
						keep_openItem.prev('h2').removeClass('open').addClass('close');
					});
				}
				slideItem.slideToggle(slide_speed,function() {
					slideItem.prev('h2').removeClass('close').addClass('open');
					keep_openItem=slideItem;
				});
			}
			if (!$(this).hasClass('active')) {
				slideItem.slideToggle(slide_speed);
				slideItem.prev('h2').removeClass('open').addClass('close');
				keep_openItem=null;
			}
		});

	});

})(jQuery);



画像

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

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

以上です。

 


[ この記事のURL ]


タグ:jquery , Accordion

 

ブログ記事一覧

年別アーカイブ一覧



[1]