SimpleAccordion

JavaScript

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

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

SimpleAccordion

デモ

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

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

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

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

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

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

SimpleAccordion

jQuery LEDLEDディスプレイのようなカウントダウン・タイマー・時計を実装できる「jQuery LED」前のページ

クッキーバナーを手軽に作れるjQueryプラグイン「Cookie Banner JS」次のページno-image

関連記事

  1. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  2. Light-Zoom

    JavaScript

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

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

  3. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  4. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  5. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  6. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP