Houdini

JavaScript

シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオンを実装できるスクリプトです。複雑なアニメーションなどを必要とせず、シンプルな開閉式のコンテンツを設置したい人にはピッタリですね。

Houdini

デモ

デモでは展開したり折りたたんだりできるコンテンツとアコーディオンのサンプルが用意されています。

試しに「Show +」をクリックするとコンテンツが表示されるのが確認できます。展開されると「Show +」は「Hide -」に切り替わります。再度折りたたみたい時は、この「Hide -」をクリックすればOKです。

またアコーディオンではSection 1〜3があり、各セクションをクリックすることでそれに対応したコンテンツが展開されます。無駄なアニメーションも特になく、サクサクと素早い動作や操作性が実に効率的ですね。

オプションやコールバックには、selectorToggle、selectorContent、toggleActiveClass、contentActiveClass、initClass、stopVideo、callbackOpen、callbackCloseといった項目があります。

Houdini

ShowMore.js長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」前のページ

サイドバーをフローティングできる「FloatSidebar.js」次のページno-image

関連記事

  1. JavaScript

    アニメーション付きの水平・垂直プログレスメーターを実装できる「jQMeter」

    jQMeterはアニメーションが付いた水平・垂直のプログレスメーターを…

  2. Sticky Sidebar

    JavaScript

    スマートでハイパフォーマンスな追尾型サイドバー実装「Sticky Sidebar」

    Sticky Sidebarは、スマートでハイパフォーマンスな追尾型サ…

  3. Zoomerang.js
  4. Animsition
  5. CSS Jquery Pie Countdown Timer

    JavaScript

    グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Time…

    円形によるカウントダウンのタイマーを実装する「CSS Jquery P…

  6. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP