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

サイト構築 -JavaScript

Post on:2009年3月25日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

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

Simple Toggle with CSS & jQuery
demo

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

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

HTMLの基本構造

<textarea name="code" class="html" cols="60" rows="5">
<h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
	<div class="block">
		<h3>Content Header</h3>
		<!--Content-->
	</div>
</div>
</textarea>

<h2 class="trigger"><a href="#">Toggle Header</a></h2>

<h3>Content Header</h3>

</div>

</textarea>

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

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
$(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,");
	});

});
</textarea>