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

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

デモのキャプチャ

Simple Toggle with CSS & jQuery
demo

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

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

HTMLの基本構造

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

JavaScript

sponsors

top of page

©2024 coliss