アコーディオン形式パネルをjQueryで実装しよう

Webサイトなどで、目次式にタイトルなどのメニューを表示させ、

クリックすることで詳細が表示するという仕掛け。

今でもあちらこちらで使われているのを見かけます。

実装自体はとても簡単。早速ソースをみてみましょう。

HTML + CSS

JS (jQuery)

サンプルデモ

解説

最初に クラスpanelとddの要素に 非表示を指定

panel+dtの要素には、クリックすると表示させるメソッドを指定

slideUpとslideDownいうメソッドでアニメーション時間(コールバック関数)を設定。

jQueryのライブラリでが、toggleという名前で登録されています。

こちらを使った時のソースはこちら =>

See the Pen Toggle by Yukyco (@yukyco) on CodePen.

 

参考サイト:http://api.jquery.com/toggle/

 

ググったら私の好きなCodropでも、デモがあったので、早速試させて頂きました。

サンプルデモ

配布元

Flexible Slide-to-top Accordion

書き方はいくつもあるので、一番簡単なのがいいですね・・・!

 

toggle or panel or accordion ?

そして名前はどう呼べばいいのか?

toggleというのは、英語で切り替えるという意味を持っている

panelは、ボタンという意味合い

accordionは、一度に複数のパネルを開いた状態にできる状態

 

という訳で、機会に応じて使う必要がありそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA