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. スマトラ
  2. さくらドーナツ
  3. 紙のコーヒーフィルター
  4. PS5とFF7リメイクと鉄拳8
PAGE TOP