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

BigTextテキストを指定した幅にフィットさせるjQueryプラグイン「BigText」前のページ

【iOS 11】選択した文章をドラッグ&ドロップで簡単に移動するやり方次のページ文章をドラッグ&ドロップで移動

関連記事

  1. Product Builder

    JavaScript

    カスタマイズ性に優れたオンラインストアに役立つ「Product Builder」

    Product Builderは、カスタマイズ性に優れたオンラインスト…

  2. Intense Images
  3. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  4. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  5. Sliding Panels Template
  6. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP