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. jQuery-Simple-MobileMenu
  2. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  3. Reshader

    JavaScript

    カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

    Reshaderは、カラーの濃淡を得ることができる便利なJavaScr…

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

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  5. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  6. Basic Metro Dynamic jQuery Tab Menu

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP