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


jQuery WordPress用アコーディオン デモ


[jquery] toggle()を使用しないWordPress用アコーディオン、シミュレーションです。
CMSのサイドバー構造はほぼ同じですからWordPressに限らずほぼ全てで動作すると思います。[jqury-1.9系][jqury-2.0系]でも動作します。
このページは、WordPressでは無いために WordPress用サイドバーのHTML構造 を作ってテストします。
2015/04/25 新規


DEMO jQuery WordPress用アコーディオン デモ (タイトルClickタイプ)


開閉タイプ別のアコーディオン、シミュレーション

 

 

左の「サイドバーエリア」の青色「最近の投稿」「カテゴリー」「メタ情報」タイトル部分にアコーディオンを設定しています。
初期設定は2番目の「同時開閉連動タイプ」です。

 

タイプ切替が出来ます。一旦開いているブロックを全て閉じます。

● タイプ切替 : 個別開閉 同時開閉 開いて閉じる 閉じて開く

 

このページは[jqury-1.9]で動作しています。IE9-11、Chrome Firefox Opera でOK、Mac未確認



 

 

HTML JS CSS


参考HTML

実際に使用されている、下記のような構造でテストしています。


<div id="side">
<div id="search-3" class="widget widget_search">
	<form role="search" method="get" id="searchform" action="javascript:void(0);" >
	<div id="fs"><input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="検索" /></div>
	</form>
</div>
<div id="pages-2" class="widget widget_pages">
	<div class="side_d">
		<div class="side_box">
			<h3>固定ページ</h3>
			<ul>
			<li class="page_item page-item-1">ニュース</li>
			<li class="page_item page-item-2">ブログ</li>
			<li class="page_item page-item-3">リンク集</li>
			<li class="page_item page-item-4">お問い合わせ</li>
			<li class="page_item page-item-5">アクセスマップ</li>
			</ul>
		</div>
	</div>
</div>
<div id="recent-posts-3" class="widget widget_recent_entries">
	<div class="side_d">
		<div class="side_box">
			<h3>最近の投稿</h3>
			<ul>
			<li>投稿1</li>
			<li>投稿2</li>
			<li>投稿3</li>
			<li>投稿4</li>
			<li>投稿5</li>
			</ul>
		</div>
	</div>
</div>
<div id="category-4" class="widget widget_category">
	<div class="side_d">
		<div class="side_box">
			<h3>カテゴリー</h3>
			<ul>
			<li>カテゴリー1</li>
			<li>カテゴリー2</li>
			<li>カテゴリー3</li>
			<li>カテゴリー4</li>
			</ul>
		</div>
	</div>
</div>
<div id="meta-2" class="widget widget_meta">
	<div class="side_d">
		<div class="side_box">
			<h3>メタ情報</h3>
			<ul>
				<li>ログイン</li>
				<li>RSS</li>
				<li>WordPress.org</li>
				<li>--------</li>
			</ul>
		</div>
	</div>
</div>
</div>

JS

JSの設定方法などは、記事ページを参照ください。同じようなスタイル作りました。設定などはこのページのデモHTMLに合わせたものです。

wp-accordion1.js、wp-accordion2.js、wp-accordion3.js、wp-accordion4.js、JS名の変更は自由です。
wp-accordion1.js、wp-accordion2.jsは設定違いで同じようなものが記事ページに有ります。



//個別開閉
//wp-accordion1
(function($){

	$(function(){

		//速度
		var slide_speed=400;
		//MENUブロック指定クラス名付加
		var accord=$('#recent-posts-3,#category-4,#meta-2').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(){

			$(this).toggleClass("active");
			$(this).next().slideToggle(slide_speed);

		});

	});

})(jQuery);

//同時開閉
//wp-accordion2
(function($){

	$(function(){

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

		//MENUブロック指定クラス名付加
		var accord=$('#recent-posts-3,#category-4,#meta-2').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);

//開いてから閉じる
//wp-accordion3
(function($){

	$(function(){

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

		//MENUブロック指定クラス名付加
		var accord=$('#recent-posts-3,#category-4,#meta-2').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('ul');

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

				//DOWN
				slideItem.slideToggle(slide_speed,function(){

					//開いていればUP
					if(keep_openItem) {
						keep_openItem.slideUp(slide_speed,function(){

							//activeクラス切り替
							keep_openItem.prev('h3').removeClass("active");
							//openItem保存
							keep_openItem=slideItem;

						});

					}else{

						//openItem保存
						keep_openItem=slideItem;
					}

				});

			}

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

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

		});

	});

})(jQuery);

//閉じてから開く
//wp-accordion4
(function($){

	$(function(){

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

		//MENUブロック指定クラス名付加
		var accord=$('#recent-posts-3,#category-4,#meta-2').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('ul');

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

				//開いていればUP
				if(keep_openItem) {

					keep_openItem.slideUp(slide_speed,function(){
						//activeクラス切り替
						keep_openItem.prev('h3').removeClass("active");
						//DOWN
						slideItem.slideToggle(slide_speed,function(){
							//openItem保存
							keep_openItem=slideItem;
						});
					});

				}else{

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

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

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

		});

	});

})(jQuery);


参考CSS

テストのためのCSSです。実際にはCMSなどのCSSを使用します。


/* wordpress */
#side {
display:block;
width:220px;
height:auto;
margin-left:20px;
padding:5px;
background-color:#F5F5F5;
float:left;
}
#side .widget_search{
margin:10px 0;
}
#side .widget div .side_box{
margin:5px 0 10px 0;
}
#side .widget div .side_box h3{
width:208px;
height:25px;
margin:1px 0 5px 1px;
padding:2px 0 0 10px;
line-height:25px;
color:#FFFFFF;
font-size:12px;
background-color:#888888;
}
#side .widget div .side_box h3.wp-accordion{
background-color:#4682B4;
}
/* arrow */
#side .widget div .side_box h3.arrow{
background-color:#BBBBBB;
cursor:pointer;
}
#side .widget div .side_box h3.opend{
cursor:default;
}

/* active */
#side .widget div .side_box h3.active {
background-color:#DB7093;
}
/* hovered */
#side .widget div .side_box h3.hovered {
background-color:#DAA520;
}

#side .widget div .side_box ul {
display:block;
list-style:none;
width:auto;
height:100%;
margin:0;
padding:0;
background-color:#FFFFFF;
}
#side .widget div .side_box ul li{
list-style:none;
width:210px;
height:16px;
margin-left:5px;
padding:0;
border-bottom:1px #EEEEEE solid;
line-height:16px;
font-size:12px;
color:#555555;
}
#side .widget div .side_box ul li a {
text-decoration:none;
color:#BBBBBB;
}



 

詳細説明などは、記事ページを参照ください。

 

以上。

 

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