アコーディオンメニュー内にアコーディオン【handy-collapse.js】

handy-collapse

「FAQ」「Q&A」に最適なコンテンツ切り替えアコーディオンメニュー【handy-collapse.js】の設置方法をご案内します。

アコーディオンメニュー内にアコーディオン【handy-collapse.js】

handy-collapse.jsは、スムーズなスライドアップダウン効果で、アコーディオン内にもアコーディオンインターフェイスを作成するために使用されるシンプルなJavaScriptプラグインです。

スマホ版プレビュー

handy-collapse-masterプレビュー

handy-collapse.js デモ

著者 sk-rt
公式ページ website
デモページ handy-collapse.js
最後の更新 2019年6月1日
ライセンス MIT

LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上(css、html)内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照:MITライセンス(日本語翻訳)

handy-collapse.js ダウンロード

download

handy-collapse.js Download

handy-collapse.js 設置方法

スタイルシート(css)『bulma.min.css』は<head”></head”>内に記述! JavaScriptは『handy-collapse.js』<body></body>内に記述します。


<link rel="stylesheet" href="bulma.min.css">


<script src="js/handy-collapse.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded",
                () => {
                    //Basic Accordion
                    const basic = new HandyCollapse();
                    //Nested
                    const nested = new HandyCollapse({
                        nameSpace: "nested",
                        closeOthers: false
                    });
                    //Callback
                    const callback = new HandyCollapse({
                        nameSpace: "callback",
                        closeOthers: false,
                        onSlideStart: (isOpen, contentID) => {
                            console.log(isOpen);
                            const buttonEl = document.querySelector(`[data-callback-control='${contentID}']`);
                            if (!buttonEl) return;
                            if (isOpen) {
                                buttonEl.textContent = "Opened " + contentID;
                            } else {
                                buttonEl.textContent = "Closed " + contentID;
                            }
                        }
                    });
                    //Callback
                    const tab = new HandyCollapse({
                        nameSpace: "tab",
                        closeOthers: true,
                        isAnimation: false
                    });
                },
                false
            );
        </script>

【handy-collapse.js】のHTML
Basic Accordion

<section class="section">
  <h2>Basic Accordion</h2>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-hc-control="content01">
Content 01
</button>
  <div class="is-active" data-hc-content="content01">
    <div class="box">
      <p>コンテンツ01</p>
    </div>
  </div>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-hc-control="content02">
Content 02
</button>
  <div data-hc-content="content02">
    <div class="box">
      <p>コンテンツ02</p>
    </div>
  </div>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-hc-control="content03">
Content 03
</button>
  <div data-hc-content="content03">
    <div class="box">
      <p>コンテンツ03</p>
    </div>
  </div>
 
</section>

Nested Accordion

<section class="section">
  <h2>Nested Accordion</h2>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-nested-control="content01">
Content 01
</button>
 
  <div data-nested-content="content01">
    <div class="box">
      <p>コンテンツ01</p>
        <button type="button" class="button is-info is-fullwidth is-medium" data-nested-control="child01">
        Child Content 01
        </button>
      <div data-nested-content="child01">
        <div class="box" style="background-color:#FFF">
          <p>子 コンテンツ01</p>
        </div>
      </div>
    </div>
  </div>
 
 <button type="button" class="button is-primary is-fullwidth is-medium" data-nested-control="content02">
  Content 02
  </button>
 
  <div data-nested-content="content02">
    <div class="box">
      <p>コンテンツ02</p>
        <button type="button" class="button is-info is-fullwidth is-medium" data-nested-control="child02">
        Child Content 02
        </button>
      <div data-nested-content="child02">
        <div class="box" style="background-color:#FFF">
          <p>子 コンテンツ02</p> <button type="button" class="button is-warning is-fullwidth is-medium" data-nested-control="grandChild02">
                                    GrandChild Content 02
                                </button>
          <div data-nested-content="grandChild02">
            <div class="box" style="background-color:#FFF">
              <p>グランドチャイルド コンテンツ02</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
</section>

Callback

<section class="section">
  <h2>Callback</h2>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-callback-control="content01">
Closed content01
</button>
  <div data-callback-content="content01">
    <div class="box">
      <p>コンテンツ01</p>
    </div>
  </div>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-callback-control="content02">
Closed content02
</button>
  <div data-callback-content="content02">
    <div class="box">
      <p>コンテンツ02</p>
    </div>
  </div>
 
</section>

Basic、Nested、Callback【handy-collapse.js】のソースコード設置例


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>Accordion【handy-collapse.js】</title>
 
    <link rel="stylesheet" href="bulma.min.css">
 
</head>
<body>
<div class="container">
 
<section class="section">
  <h2>Basic Accordion</h2>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-hc-control="content01">
Content 01
</button>
  <div class="is-active" data-hc-content="content01">
    <div class="box">
      <p>コンテンツ01</p>
    </div>
  </div>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-hc-control="content02">
Content 02
</button>
  <div data-hc-content="content02">
    <div class="box">
      <p>コンテンツ02</p>
    </div>
  </div>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-hc-control="content03">
Content 03
</button>
  <div data-hc-content="content03">
    <div class="box">
      <p>コンテンツ03</p>
    </div>
  </div>
 
</section>
 
<hr />
 
<section class="section">
  <h2>Nested Accordion</h2>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-nested-control="content01">
Content 01
</button>
 
  <div data-nested-content="content01">
    <div class="box">
      <p>コンテンツ01</p>
        <button type="button" class="button is-info is-fullwidth is-medium" data-nested-control="child01">
        Child Content 01
        </button>
      <div data-nested-content="child01">
        <div class="box" style="background-color:#FFF">
          <p>子 コンテンツ01</p>
        </div>
      </div>
    </div>
  </div>
 
 <button type="button" class="button is-primary is-fullwidth is-medium" data-nested-control="content02">
  Content 02
  </button>
  <div data-nested-content="content02">
    <div class="box">
      <p>コンテンツ02</p>
        <button type="button" class="button is-info is-fullwidth is-medium" data-nested-control="child02">
        Child Content 02
        </button>
      <div data-nested-content="child02">
        <div class="box" style="background-color:#FFF">
          <p>子 コンテンツ02</p>
       <button type="button" class="button is-warning is-fullwidth is-medium" data-nested-control="grandChild02">
            GrandChild Content 02
       </button>
          <div data-nested-content="grandChild02">
            <div class="box" style="background-color:#FFF">
              <p>グランドチャイルド コンテンツ02</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 
</section>
 
<hr />
 
<section class="section">
  <h2>Callback</h2>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-callback-control="content01">
Closed content01
</button>
  <div data-callback-content="content01">
    <div class="box">
      <p>コンテンツ01</p>
    </div>
  </div>
 
<button type="button" class="button is-primary is-fullwidth is-medium" data-callback-control="content02">
Closed content02
</button>
  <div data-callback-content="content02">
    <div class="box">
      <p>コンテンツ02</p>
    </div>
  </div>
 
</section>
 
<script src="js/handy-collapse.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded",
                () => {
                    //Basic Accordion
                    const basic = new HandyCollapse();
                    //Nested
                    const nested = new HandyCollapse({
                        nameSpace: "nested",
                        closeOthers: false
                    });
                    //Callback
                    const callback = new HandyCollapse({
                        nameSpace: "callback",
                        closeOthers: false,
                        onSlideStart: (isOpen, contentID) => {
                            console.log(isOpen);
                            const buttonEl = document.querySelector(`[data-callback-control='${contentID}']`);
                            if (!buttonEl) return;
                            if (isOpen) {
                                buttonEl.textContent = "Opened " + contentID;
                            } else {
                                buttonEl.textContent = "Closed " + contentID;
                            }
                        }
                    });
                    //Callback
                    const tab = new HandyCollapse({
                        nameSpace: "tab",
                        closeOthers: true,
                        isAnimation: false
                    });
                },
                false
            );
        </script>
 
</div>
</body>
</html>

handy-collapse.js Download

関連記事

  1. zoomwall_js

    CSS ポップアップ フォトギャラリー【 zoomwall.js 】

  2. 「FAQ」「Q&A」「SIDE MENU」に最適なアコーディオンメニュー

    「FAQ」「Q&A」に最適なアコーディオンメニュー(無料素材…

  3. accordion-init

    JavaScriptのモダンで滑らかな展開型アコーディオン【accor…

  4. grid-gallery-master

    Lightboxと軽量フォト グリッドギャラリー 【Grid Gall…

  5. Lightboxに画像をグループ化する軽量なJavaScriptプラグ…

  6. サムネイルクリック レスポンシブギャラリー

    サムネイルクリックで画像が入れ替わる レスポンシブギャラリー 【res…

制作実績一覧

  1. スパイシーベジーカレー
  2. bacchus
  3. ふじぜんリニューアル後
  4. legend-planning
  5. ポスティングこころざし様
  6. インテリアコーディネーター小島真子

最近の記事

  1. ホームページで求人獲得
  2. プロカメラマン
  3. Googleマイビジネス
  4. 会社概要
  5. ドメイン
  6. エックスサーバー
  7. さくらレンタルサーバ
  8. レンタルサーバー ロリポップ
  9. レンタルサーバー選び