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. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  2. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  3. Canvi

    JavaScript

    左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

    CanviはVanilla JSによるシンプルなナビゲーションメニュー…

  4. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  5. Bootstrap Photo Gallery jQuery plugin
  6. Circular Slider

最近の記事

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

アーカイブ

PAGE TOP