08 jQuery

縦横にアコーディオンするjQueryアコーディオン「Grid Accordion with jQuery」

多くのコンテンツを少ない面積で見せることができるアコーディオンによる見せ方は様々なWEBのシーンで使われていますが、今回紹介するのは、通常一方向だけではなく、縦と横、両方向に展開ができるjQueryを使ったアコーディオン「Grid Accordion with jQuery」です。

desingdevelopsjquery
InfoGrid – DEMO

上記のように、多数のカテゴリーでコンテンツが多岐に渡る場合や表組みで、比較したいときなどは非常に便利な機能だと思います。

HTML側はdl、dt、ddで構成された非常にシンプルなものになっており、それおをCSSでデザインをし、jQueryで動きを動作するというものになっています。

ソースコード自体は非常にシンプルなものになっていますので、この手のライブラリをつかって何かを組み込んだことがある方なら問題なく実装できるかと思います。ソースファイルをまるごと収録したサンプルファイルも「Grid Accordion with jQuery | CSS-Tricks」からダウンロード可能ですので、良いなと思った方は是非どうぞ。

関連記事

  1. テキストをフェードインしながらマウスオーバーで色を変える「jQu…
  2. Lightboxスクリプトいろいろ
  3. jQueryで実現するリッチな表現のメニュー「10 Fresh …
  4. 実用的なjQueryで作るスライダーをまとめた「28 Usefu…
  5. 最近リリースされた、ナビゲーション系のjQueryプラグイン集「…
  6. ナンバリングがついたjQueryとCSSで制御するスライダー「 …
  7. サイト制作に便利なjQuery集「15 useful jQuer…
  8. 最近リリースされた使えるjQueryプラグイン集「29 Best…
PAGE TOP