Ziehharmonika

JavaScript

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

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

Ziehharmonika

デモ

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

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

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

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

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

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

Ziehharmonika

pull-to-reload下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」前のページ

テキストコンテンツをページ分割(ページネーション)できる「jPaginate」次のページNO IMAGE

関連記事

  1. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  2. scroll-scope.js

    JavaScript

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

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

  3. Parallax Slider with jQuery
  4. JavaScript

    シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQu…

    jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグ…

  5. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  6. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP