SimpleAccordion

JavaScript

シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

SimpleAccordionは、シンプルなアコーディオンを実装することができるjQueryプラグインです。見出しをクリックすると、サッとさりげないフェードでコンテンツが表示されます。複雑な機能を必要とせず、シンプルで手軽に実装可能なアコーディオンを探している人にオススメです。

SimpleAccordion

デモ

デモでは3つのテキスト項目が並べられており、各項目をクリックするとフェードでコンテンツが表示されます。再度、見出しをクリックするとコンテンツが非表示になる仕組みです。

コンテンツが表示される時のフェードアニメーションがとてもさりげない感じなのがいいですね。複雑な機能や余計な装飾などもなく、シンプルで簡単な操作性のアコーディオンに仕上がっています。

コンテンツが表示されている時は、そのコンテンツの見出しのカラーが変わっているので、どの見出しに対応したコンテンツが開かれているのか瞬時にわかります。

また、1番上の見出しの上に設置されている2つのボタンから、全表示・全非表示を実行することも可能です。

ちなみに、全表示するボタンには「.showall」、全非表示にするボタンには「.hideall」のクラスを付与します。そのほか、見出しには「.acchead」、コンテンツ(本文)には「.accbody」のクラスを使用します。

それ以外にも、「.accopen」や「.rotate」といったクラスもあるので、気になる人はぜひチェックしてみてください。

SimpleAccordion

関連記事

  1. TOAST UI Chart

    JavaScript

    多彩なチャートを描画できる「TOAST UI Chart」

    TOAST UI Chartは多彩なチャートをWebページに描画できる…

  2. Responsive overlay menu

    JavaScript

    美しいオーバーレイメニューを実装できる「Responsive overlay menu」

    Responsive overlay menuはレスポンシブに対応した…

  3. JQuery SlideShow

    JavaScript

    軽量な自動スライドショー(画像・動画)を実装できる「JQuery SlideShow」

    JQuery SlideShowは、画像・動画のスライドショーを実装で…

  4. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

  5. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  6. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP