よく使うjqueryのアコーディオン。

ダウンロード：accordion.js

Demo

アコーディオンエリア1

アコーディオンエリア2

HTML

必要な要素だけ書き出すとこんな感じ
↓のstyle=”～”は実際は書く必要ない。SyntaxHighlighterが勝手に吐き出してるだけ。

アコーディオンエリア1

	

		
ボタン1
		
内容1
	
	

		
ボタン2
		
内容2
	
	

		
ボタン3
		
内容3
	


アコーディオンエリア1

	

		
ボタン1
		
内容1
	
	

		
ボタン2
		
内容2
	
	

		
ボタン3
		
内容3
	

JS

JSは該当箇所を変更

	var clickBtn  = ['#box01 .btn','#box02 .btn'];
	var ac_detail = ['#box01 .detail','#box02 .detail'];
	var Speed ="fast"
	var openTypeOne = true; // true or false

clickBtn：アコーディオンエリアが複数ある場合は配列でボタンのID,Classを指定。
ac_detail：アコーディオンで開閉する場所の指定　複数ある場合はClickBtnと数を合わせる。
Speed：スライドのスピード
openTypeOne：一箇所開くと他の箇所は閉じる場合は「true」、もう一回ボタンをクリックしないと閉じない場合は「false」

CSS

ボタンクリック時には「clickBtn_on+数字」のClassが付くのでcssで見栄えを調整。
数字はclickBtnで指定した順に0からの連番が付く。（例：最初のエリアには「clickBtn_on0」）

以上。

jQuery

• 
• Tweet