Ziehharmonika

JavaScript

かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

アニメーションがとてもクールでかっこいいアコーディオンを実装することができるjQueryプラグイン「Ziehharmonika」をご紹介します。ファイル容量も軽量なので、動作もサクサクと快適です。オプションによるカスタマイズも可能です。

Ziehharmonika

デモ

デモでは3つの見出しが設置されており、各見出しをクリックするとそれに応じたコンテンツがスライドダウンで表示されます。現在開かれているコンテンツは、新たなコンテンツが開かれると同時にスライドアップで非表示になります。

また、同じ見出しを再度クリックするとそのコンテンツを閉じることができます。

見出しは、選択されると背景カラーが変化します。一つだけ背景カラーが他のものと違うことで、現在どれが選択されているのかが一目で認識できますね。

それから、見出しの右側には「+」や「-」といったアイコンも表示されています。コンテンツが開かれている見出しには「-」、コンテンツが閉じられている見出しには「+」が付いています。

ちなみに、こちらのアイコンはオプション項目の「collapsibleIcons」から好きなアイコンに変更可能です。collapsibleIconsの「opened」と「closed」に、各アイコンを指定することで、そのアイコンを表示させることができます。

オプションは他にもいくつか用意されており、highlander、arrow、collapsible、prefix、headline、collapsibleIconsAlignといった項目のセッティングが可能です。

Ziehharmonika

関連記事

  1. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  2. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  3. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

  4. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  5. JavaScript

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  6. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP