Houdini

JavaScript

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

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

Houdini

デモ

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

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

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

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

Houdini

関連記事

  1. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  2. diamonds.js
  3. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  4. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  5. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  6. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

最近の記事

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

アーカイブ

PAGE TOP