no-image

JavaScript

タブやアコーディオンを実装できるjQueryプラグイン「jpix」

jpixはシンプルなタブやアコーディオンを実装することができるjQueryプラグインです。これ1つでタブもアコーディオンも表示可能なのはとても便利ですね。タブ用、アコーディオン用のオプションもいくつか用意されています。

jpix

jpix

デモでは実装されたタブとアコーディオンが設置されています。タブ、アコーディオンともにとてもシンプルなデザインに仕上がっています。

アコーディオンでは各アイテムをクリックすると、スライドダウンで子メニューが表示されます。再度同じアイテムをクリックすると、今度はスライドアップで子メニューが閉じられます。ちなみに、別のアイテムをクリックすると、現在開かれている子メニューが閉じられると同時に新しくクリックされたアイテムの子メニューが表示されます。

シンプルなデザインなので、さまざまなページに設置しやすいのではないでしょうか?

また、タブ・アコーディオンともにオプションもいくつか用意されています。

タブのオプションは、activeClass、activeContent、dataAttrです。アコーディオンのオプションは、openDefault、activeClass、activeContent、dataClassです。

実用的な機能もオプションから手軽にセッティングが可能です。

というわけで、シンプルなタブやアコーディングを実装できるjQueryプラグイン「jpix」のご紹介でした。

SweetAlert2カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2」前のページ

グリッドアイテムをかっこよく表示するアニメーション「Inspiration for Grid Loading Animations」次のページInspiration for Grid Loading Animations

関連記事

  1. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  2. JavaScript

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  3. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  4. EasyZoom

    JavaScript

    タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」

    EasyZoomはタッチにも対応したモバイルフレンドリーな、画像拡大や…

  5. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  6. Building a Vertical Timeline With CSS and a Touch of JavaScript

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP