vallenato.js

JavaScript

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

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

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

デモ

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

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

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

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

vallenato.js

関連記事

  1. jQuery Seat Charts
  2. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

  3. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  4. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  5. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  6. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP