jQueryでとても簡単にアコーディオンのパーツを作る方法・手順

いつものようにjQuery本体の読み込みは忘れないようにしてください。

CSSの設定無しでも動きます。(裸状態ですが)

html部

<dl class="accordion">
	<dt>これはdtにaccordionクラスをつけます</dt>
	<dd>
		<p>ここにはテキストが入ります。ここにはテキ・・・</p>
	</dd>
</dl>

jQuery部

<script>
$(function(){
	$('.accordion dd').css('display','none');
	$('.accordion dt').on('click',function(){
		$(this).toggleClass('open');
		$(this).siblings('dd').slideToggle();
	});
})
</script>

以上です。超簡単です。

  • このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサーリンク