vallenato.js

JavaScript

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

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

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

デモ

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

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

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

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

vallenato.js

P-Loadingパワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」前のページ

クールなグラデーションがたくさん用意されたWebサイト「coolHue」次のページcoolHue

関連記事

  1. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

  2. RV gallery-slider

    JavaScript

    軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」

    RV gallery-sliderは軽量でタッチフレンドリーなギャラリ…

  3. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  4. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  5. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

  6. VerticalShift

    JavaScript

    要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」…

    とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオー…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP