Houdini

JavaScript

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

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

Houdini

デモ

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

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

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

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

Houdini

関連記事

  1. no-image

    JavaScript

    多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」

    camera-sliderは多彩なエフェクトを備えた美しいスライドショ…

  2. jQuery Text Fade Delay
  3. JavaScript

    軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

    軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「Mo…

  4. ClickSpark.js

    JavaScript

    美しいパーティクルエフェクトを実装できる「ClickSpark.js」

    ClickSpark.jsは画像を用いたたくさんの粒子が放出されるよう…

  5. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  6. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP