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. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  2. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  3. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  4. Chariot

    JavaScript

    Webページ内でステップごとのガイドツアーを実装できる「Chariot」

    ChariotはWebページ内でのガイドツアーを実装することができるJ…

  5. CSS3 3D Text Plugin for jQuery
  6. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

最近の記事

  1. チキン&グリーンサンドイッチ
  2. アートアクアリウム美術館 GINZA
  3. オケラ
  4. デンタルプロ 歯間ブラシ
  5. ダミアン・ハースト 桜
PAGE TOP