Accordion.JS

JavaScript

クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

Accordion.JSは、開閉の動作がクイックで使いやすいアコーディオンを実装することができるjQueryプラグインです。ファイル容量も軽量で、gzip圧縮で〜1KBというのもうれしいですね。オプションやHTML5のdata属性を使用して設定することができます。

Accordion.JS

デモ

「Section 1」や「Section 2」などのヘッダー部分をクリックすると、その場所のコンテンツがスライドで開閉されます。開閉のスライドは、とてもクイックに動作するのでストレスなくサクサクとコンテンツを閲覧していくことが可能です。

デザインもシンプルで余計な装飾もなく、いろんなWebサイトに合わせやすいと思います。

デモページには、デフォルトのサンプルをはじめ、Second section active(例えば、Section 2のコンテンツを予め開いておく設定)やMultiple sections open by default(Section 2とSection 4を予め開いておく設定)など、いくつかのパターンのサンプルが設置されています。

Accordion.JSには、オプションもいくつか用意されているのでちょっとしたカスタマイズもしやすいです。主なオプションは、closeAble、closeOther、slideSpeed、activeIndex、openSection、beforeOpenSectionです。

シンプルで軽量、そしてクイックな動作でストレスレスなアコーディオンを実装できるjQueryプラグインを探している人は、ぜひ「Accordion.JS」を使われてみてはいかがですか?

Accordion.JS

関連記事

  1. jQuery Parallax

    JavaScript

    美しいパララックススクロールエフェクトを実装できる「jQuery Parallax」

    jQuery Parallaxは美しいパララックススクロールエフェクト…

  2. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  3. no-image
  4. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  6. ScrollMe

    JavaScript

    シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

    ScrollMeというjQueryプラグインを使えば、シンプルでスタイ…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP