POPSブログ

jQueryその他のアコーディオン/1

122

  Category:  jquery2012/06/21 pops 

jQueryその他のアコーディオン1、メニューまたはサイドでの使用ではなく、コンテンツ内部で使用する、コンテンツ用アコーディオンである。

 

コンテンツ用アコーディオン(clickタイプ)


jquery クリック関数(アニメ用関数では無い)、toggle() が「非推奨」となりました。2012/11/21追記

「非推奨」に該当部分がありましたら後日、代替の新しいものに変えて行きますのでご理解ください。
「非推奨」の理由は誤作動があるからの様です。使用してそのようなことは確認していませんでしたが、この関数はとても便利でしたので残念です。
尚、jquery バージョン、1.8.2 時点では作動します。


コンテンツ用Accordion サンプル

前のアコーディオンはメニューなどで応用するものでしたが、これはコンテンツ内部でのアコーディオンである。単に目的の文章ブロックを非表示にしておき、アクションがあれば表示するものである。アコーディオンというべきかは微妙である。使用することにより、ページの高さを抑えることが出来る。

  • ページ内のコンテンツの中で使用する事を目的にしています。
  • サブタイトルなりの部分にクリックのアクションを設定します。(p または div 要素構成)
  • その直下に開閉するコンテンツをおきます。(div 要素構成)
  • クラス名などは自由です。変更の際はJS、CSSの方も同じにします。
  • common.js等、常時読み込むJSに書き込んだほうが便利です。
  • デザインの変更はCSSを変更してください。
  • クリックする箇所であることが判るように明示的に作ることがコツと思います。

単純な開閉形(div 使用)

下の「タイトルブロック」をクリックください。


Example1

Contents-Accordion1 toggle


コンテンツサブタイトル1

1.コンテンツの内容..............................

コンテンツサブタイトル2

2.コンテンツの内容..............................

コンテンツサブタイトル3

3.コンテンツの内容..............................

Example2

Contents-Accordion2 toggle


コンテンツサブタイトル1

1.コンテンツの内容..............................

コンテンツサブタイトル2

2.コンテンツの内容..............................

コンテンツサブタイトル3

3.コンテンツの内容..............................

Example3

Contents-Accordion3 toggle


▽ コンテンツサブタイトル1

NOTE1 コンテンツの内容




[CLOSE]

▽ コンテンツサブタイトル2

NOT2 コンテンツの内容




[CLOSE]

▽ コンテンツサブタイトル3

NOTE3 コンテンツの内容




[CLOSE]


3種類、マトメテ書いてありますので、好みのものを選定ください。


HTML

コンテンツ内部、にサンプルと同様に記述して使用します。


---Example1---
	<p class="accord-title">コンテンツサブタイトル1</p>
	<div class="accord-block">1.コンテンツの内容..............................</div>
	<br />
	<p class="accord-title">コンテンツサブタイトル2</p>
	<div class="accord-block">2.コンテンツの内容..............................</div>
	<br />
	<p class="accord-title">コンテンツサブタイトル3</p>
	<div class="accord-block">3.コンテンツの内容..............................</div>
	<br />

---Example2---
	<p class="accord-title2">コンテンツサブタイトル1</p>
	<div class="accord-block">1.コンテンツの内容..............................</div>
	<br />
	<p class="accord-title2">コンテンツサブタイトル2</p>
	<div class="accord-block">2.コンテンツの内容..............................</div>
	<br />
	<p class="accord-title2">コンテンツサブタイトル3</p>
	<div class="accord-block">3.コンテンツの内容..............................</div>
	<br />

---Example3---
	<div class="accord-title3"><p>▽ コンテンツサブタイトル1</p></div>
	<div class="accord-box">
		<p>NOTE1 コンテンツの内容</p>
		<br /><br /><br />
		<span class="close">[CLOSE]</span>
	</div>
	<br />
	<div class="accord-title3"><p>▽ コンテンツサブタイトル2</p></div>
	<div class="accord-box">
		<p>NOT2 コンテンツの内容</p>
		<br /><br /><br />
		<span class="close">[CLOSE]</span>
	</div>
	<br />
	<div class="accord-title3"><p>▽ コンテンツサブタイトル3</p></div>
	<div class="accord-box">
		<p>NOTE3 コンテンツの内容</p>
		<br /><br /><br />
		<span class="close">[CLOSE]</span>
	</div>
	<br />

Example3の [CLOSE] を使用しない場合は、JS //close のスクリプトおよび該当のCSS部分を削除ください。


JS

基本的に、常時読み込むJSに書き込みます。または適当な名前で保存して使用します。使用しないExampleは削除。


(function($){

	//Example1
	$(function(){

		//一旦消す
		$('.accord-title').next('div').hide();

		$('.accord-title').click(function() {
			$(this).toggleClass("active");
			$(this).next('div').toggle('fast');
		});

	});

	//Example2
	$(function(){

		//一旦消す
		$('.accord-title2').next('div').hide();

		$('.accord-title2').click(function() {
			$(this).toggleClass("active");
			$(this).next('div').toggle('fast');
		});

	});

	//Example3
	$(function(){

		//一旦消す/なければOPEN状態
 		$('.accord-box').hide();

		$('.accord-title3').click(function() {
			$(this).next('div').toggle('fast');
		});
		//close
		$('.accord-box .close').click(function() {
			$(this).parent().toggle('fast');
		});
		//hover-ACTION
		$('.accord-title3').hover(
			function () {
  				$(this).addClass("hover");
			}, 
			function () {
  				$(this).removeClass("hover");
		});

	});

})(jQuery);

CSS

基本的に、常時読み込むCSSに書き込みます、または適当な名前で保存して使用します。


/* Example1 */
.accord-title {
	display:block;
	width:auto;
	height:16px;
	padding:0 2px 4px 20px;
	_padding:0 2px 2px 20px;
	color:#000000;
	background:url(/main/images/plus.gif) no-repeat left top;
	background-position:0 0;
	background-color:#EEEEEE;
	cursor: pointer;
}
.accord-title.active {
	background-position:0 -20px;
}
.accord-block {
	display:block;
	width:auto;
	margin-left:30px;
	color:#000000;
	background-color:#FFFFFF;
}


/* Example2 */
.accord-title2 {
	width:auto;
	padding:0 2px 2px 10px;
	_padding:0 2px 1px 10px;
	color:#000000;
	background:url(/main/images/arrow_3.gif) no-repeat;
	background-position:right 0;
	background-color:#CCCCCC;
	cursor: pointer;
}
.accord-title2.active {
	background-position:right -20px;
}
.accord-block {
	display:block;
	width:auto;
	margin-left:30px;
	color:#000000;
	background-color:#FFFFFF;
}


/* Example3 */
div.accord-title3 {
	display:block;
	width:auto;
	height:16px;
	padding:0 2px 4px 10px;
	_padding:0 2px 2px 10px;
	color:#FFFFFF;
	border-left:2px #FF0000 solid;
	background-color:#AAAAAA;
	cursor:pointer;
}
div.accord-title3.hover {
	background-color:#CCCCCC;
}
.accord-box {
	position:relative;
	width:auto;
	height:200px;
	padding:2px;
	background-color:#FFFFFF;
}
.accord-box .close {
	position: absolute;
	right:10px;bottom:0;
	background-color:#EEEEEE;
	/*float:right;*/
	cursor:pointer;
}

上記CSSは、ページのCSSに影響される場合があります。使用者が適正に修正ください。
.accord-block は、Example1 2 で同じ名前で使用していますので2箇所に書いています。




画像

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

使用透過背景画像

arrow.gif / 使用画像以外の画像の場合は使用者がCSSを変更ください。


arrow.gif
21x44 透過画像
arrow_2.gif
20x44 透過画像
arrow_3.gif
15x40 透過画像
arrow_4.gif
15x40 透過画像
plus.gif
15x40 透過画像

以上です。



[ この記事のURL ]


タグ:series , Accordion , jquery

[ jQueryその他のアコーディオン シリーズ記事 ]

jQueryその他のアコーディオン/32012.06.24
jQueryその他のアコーディオン/22012.06.22
jQueryその他のアコーディオン/12012.06.21

 

ブログ記事一覧

年別アーカイブ一覧



[1]