【jQuery】タグの追加、移動してアコーディオンを作る方法

htmlの構造によってはアコーディオンを作りたいけど難しい場合もあると思います。

htmlの修正が可能であればほとんどのことは対応することができると思います。

ですがたとえばプログラムで動的に出力されているものだったりするとhtmlが修正できないということもでてきます。

そんな場合はjQueryでタグの追加、移動などをすることによって実現することができます。

今回はタグの追加、移動をしてアコーディオンを作る方法について紹介していきます。

紹介するのは基礎ですが応用することでhtmlが修正できなくても最悪、jQueyである程度のことは実現できると思います。

タグの追加、移動してアコーディオンを作る方法

まず下記のようなhtmlがあるとします。

<div class="box">
	<h2>アコーディオン</h2>
	<h3>サブタイトル</h3>
	<p class="msg">説明文テキスト</p>
	<input type="text" class="textbox">
</div>

クラス「box」の中はすべて並列に要素が並んでいます。

これをh3、p、inputタグを一つの親要素にまとめてアコーディオンで表示と非表示を切り替えたいとします。

jQueryを使うことで要素を一つの親にまとめることができます。

js

jQuery(function () {
	/* タグの追加と移動 */
	jQuery('<div class="ac-cont"></div>').insertBefore('.box h3');
	jQuery('.box h3').appendTo('.ac-cont');
	jQuery('.box .msg').appendTo('.ac-cont');
	jQuery('.textbox').appendTo('.ac-cont');

	/* アコーディオン */
	jQuery(document).on('click','.box h2',function(){
		if(jQuery(this).hasClass('on')){
			jQuery(this).removeClass('on');
			jQuery(this).next('.ac-cont').slideUp();
		}else{
			jQuery(this).addClass('on');
			jQuery(this).next('.ac-cont').slideDown();
		}

	});

});

まずh3の前にac-contというdivの空タグを生成します。

次にac-contの中にh3、p、input要素を移動してまとめていきます。

あとはh2をクリックしたときのイベントを作ります。

css

.box h2{
	cursor: pointer;
	background: #eee;
	padding: 10px;
}
.ac-cont{
	display: none;
	padding: 20px;
	background: #ddd;
}

サンプル