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

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

  3. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

  4. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  5. jQuery Hero Slider Plugin
  6. Page Stack Navigation

    JavaScript

    ページをスタッキングできる「Page Stack Navigation」

    Page Stack Navigationはページをスタッキングできる…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP