クリックで折りたたみ！jQueryで作る簡単アコーデオンメニュー

WEB-LABO

アコーディオン式のメニューやクリックで表示されるコンテンツなど様々な場所で応用可能なアコーディオンをjQueryで作ってみました。

分かりやすさを優先して、効率的な記述はしていません。

PR

まずはアコーディオンのサンプル

↓ をクリックしてください。

AAAAAAAAAA

A1

A2

A3

A4

A5

BBBBBBBBBB

B1

B2

B3

CCCCCCCCCC

C1

C2

C3

C4

 

HTMLはこうなってます

このブログのCSSとかぶらないように、今回は敢えてdiv要素を使っていますが、この辺は自由に変更してください。

<div id="a">AAAAAAAAAA</div>
<div id="wrap_a">
    <p>A1</p>
    <p>A2</p>
    <p>A3</p>
    <p>A4</p>
    <p>A5</p>
</div>

<div id="b">BBBBBBBBBB</div>
<div id="wrap_b">
    <p>B1</p>
    <p>B2</p>
    <p>B3</p>
</div>

<div id="c">CCCCCCCCCC</div>
<div id="wrap_c">
    <p>C1</p>
    <p>C2</p>
    <p>C3</p>
    <p>C4</p>
</div>

 

次はCSSです

大項目メニューを太字にして、マウスが重なった時にカーソルを変更しています。

中項目部分（コンテンツ部分）は高さをゼロにして、「overflow:hidden」にしておきます。overflow:hiddenにすることで、領域に入りきれない部分は非表示になります。

<style type="text/css">
#a,#b,#c{
	font-weight: bold;
}

#a:hover,#b:hover,#c:hover{
	cursor:pointer;
}

#wrap_a,#wrap_b,#wrap_c{
	overflow:hidden;
	background-color:#eee;
	height:0px;
}
</style>

 

最後にスクリプト部分です

displayプロパティはanimate()で使えないみたいなので、高さを変えることで表示・非表示を実現しています。

変数「sw_a, sw_b, sw_c」は判定用のフラグです。分かりやすさを考慮して配列にはしていません。それぞれa, b, c用です。中項目の高さをCSSでゼロにしていますのでフラグもゼロにしておきます。

大項目がクリックされたら、if文によりフラグを調べ、ゼロなら中項目の高さを設定しフラグを1にします。逆にフラグが1なら中項目要素の高さをゼロにしてフラグにゼロをセットします。

<script type="text/javascript">
$(function(){
	var sw_a=0,sw_b=0,sw_c=0;

	//AAAAAAAAAAがクリックされたら
	$("#a").click(function(){
		if(sw_a==0){
			//sw_aがゼロならば、animate()で高さを設定する
			$("#wrap_a").animate({
				"height" : "180px"
			});

			//フラグの設定する
			sw_a=1;
		}else{
			//sw_aが1ならば、animate()で高さを0pxに設定する
			$("#wrap_a").animate({
				"height" : "0px"
			});

			//フラグの設定する
			sw_a=0;
		}
	});


	//BBBBBBBBBBがクリックされたら
	$("#b").click(function(){
		if(sw_b==0){
			//sw_bがゼロならば、animate()で高さを設定する
			$("#wrap_b").animate({
				"height" : "120px"
			});

			//フラグの設定する
			sw_b=1;
		}else{
			//sw_bが1ならば、animate()で高さを0pxに設定する
			$("#wrap_b").animate({
				"height" : "0px"
			});

			//フラグの設定する
			sw_b=0;
		}
	});


	//CCCCCCCCCCがクリックされたら
	$("#c").click(function(){
		if(sw_c==0){
			//sw_cがゼロならば、animate()で高さを設定する
			$("#wrap_c").animate({
				"height" : "150px"
			});

			//フラグの設定する
			sw_c=1;
		}else{
			//sw_cが1ならば、animate()で高さを0pxに設定する
			$("#wrap_c").animate({
				"height" : "0px"
			});

			//フラグの設定する
			sw_c=0;
		}
	});

});
</script>

プラグインを作るのであれば、色々工夫が必要ですけど、とりあえず最初はこんな感じで（笑）

※jQuery本体の読み込みを忘れないようにしましょう！

その他のTechWebTipsはこちら

関連記事