vallenato.js

JavaScript

シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

vallenato.jsは、シンプルで簡単に実装することができるjQueryアコーディンスクリプトです。垂直型のアコーディオンで、任意の見出しをクリックすることでその見出しに応じたコンテンツが開閉されます。

コンテンツの開閉はスライドダウン・スライドアップ

デモ

デモでは、Header 1〜Header 3まで全部で3つの見出しがあります。各見出しをクリックすることで、その見出しに対応しているコンテンツを表示させることが可能です。再度、同じ見出しをクリックするとコンテンツが閉じられます。また、別の見出しを選択することで現在開かれているコンテンツが閉じられ、新たに選択された見出しに対応したコンテンツが開かれます。

コンテンツの開閉はスライドダウン・スライドアップで行われます。シンプルな操作性でストレスなく使えるのがいいですね。

デモはレスポンシブにも対応していて、ブラウザ幅を変更してもそれに合わせてアコーディオンの横幅も調整されます。パソコンやスマホなどさまざまな機器で快適に閲覧・操作が可能です。

使い方に関しても、とても簡単でマークアップもシンプルに記述できます。

vallenato.js

関連記事

  1. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  2. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  3. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  4. Fitty

    JavaScript

    親コンテナにテキストをフィットさせられる「Fitty」

    Fittyはテキストをスケールアップ、またはスケールダウンして親コンテ…

  5. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  6. Rain & Water Effect Experiments

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP