jQuery Accordion

JavaScript

シンプルで実用的なアコーディオン実装「jQuery Accordion」

とてもシンプルで操作性のよいアコーディオン「jQuery Accordion」を実装できるチュートリアルをご紹介します。垂直タイプのアコーディオンで、サクサク動作する実用性がとても使いやすいです。余計な装飾などもなく、デザイン、機能ともにシンプルですが、だからこそいろんなサイトで取り入れやすいのではないでしょうか。

jQuery Accordion

jQuery Accordion

デモでは縦に4つの項目が並んでいて、各項目の右端には「+」が表示されています。好きな項目をクリックすると、それに付随したコンテンツがスライドダウンで表示されます。それと同時に、「+」も「-」に変化します。

再度クリックすると、今度はスライドアップで元の状態にもどります。もちろん「-」も「+」に変化。

クリックした項目はブルーに変化するので、どこを展開しているのかを瞬時に把握しやすいのがいいですね。またスライドダウン、スライドアップともに、ゆったりした動作ではなくサッと開閉される心地よい機敏性も、ストレスなく見れていいと思います。

自分が見たいコンテンツだけを表示できるアコーディオンは、情報をスッキリ整理させたいときにはとても有効な機能です。

「なんだかサイトがごちゃごちゃして見づらいな」と思っている人は、ぜひ「jQuery Accordion」を使ってコンテンツをシンプルに仕上げてみてはいかがでしょうか?

関連記事

  1. ToProgress

    JavaScript

    画面上部に軽量なプログレスバーを実装できる「ToProgress」

    ToProgressは画面上部にシンプルで軽量なプログレスバーを実装で…

  2. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  3. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  4. jQuery.GI.TheWall.js
  5. Ace Responsive Menu
  6. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP