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

サイト構築 -JavaScript

Post on:2009年3月25日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

パネルをスムーズなアニメーションで開閉するシンプルなスクリプトを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>