jQuery Accordion

JavaScript

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

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

jQuery Accordion

jQuery Accordion

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

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

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

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

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

Material Design Responsive Tableマテリアルデザインによるレスポンシブなテーブル実装「Material Design Responsive Table」前のページ

コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」次のページautoscroll.js

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  2. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  3. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  4. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  5. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

  6. Yet Another Ripple Plugin

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP