[JS]パネルをスムーズなアニメーションで開閉するシンプルなスクリプト

パネルをスムーズなアニメーションで開閉するシンプルなスクリプトをSoh Tanakaから紹介します。

Simple Toggle with CSS & jQuery
demo

デモではバーをクリックすると、パネルがスムーズに開閉します。
それぞれのパネルは個別に開閉するため、同時に開いた状態にすることも可能です。

バーはH2要素、パネルはdiv要素で実装されており、パネル内には画像やテキストなどを自由に配置することができます。

HTMLの基本構造

<h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Content Header</h3>

		<!--Content-->
	</div>
</div>

スクリプトはjquery.jsを外部ファイルとして使用し、下記のスクリプトを記述するだけとなっています。

JavaScript

$(document).ready(function(){

	$(".toggle_container").hide();

	$("h2.trigger").toggle(function(){
		$(this).addClass("active");
		}, function () {
		$(this).removeClass("active");
	});

	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow,");
	});

});

Post on:2009年3月25日