Ziehharmonika

JavaScript

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

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

Ziehharmonika

デモ

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

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

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

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

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

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

Ziehharmonika

関連記事

  1. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  2. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

  3. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  4. stickUp
  5. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  6. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

最近の記事

  1. 16インチMacBook Pro
  2. レトロスペクティブ V2.0
  3. YAECA ワイドテーパードデニム 10-13WW

アーカイブ

PAGE TOP