アコーディオンメニュー内にアコーディオン【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. lightbox2

    あらゆるブラウザに対応!画像ポップアップスクリプト【Lightbox2…

  2. hes-gallery-master

    モバイル対応レスポンシブギャラリー【HesGallery】

  3. tilescolumns-unite-gallery

    スマホ時にスワイプにも対応👆グリッドギャラリー【Til…

  4. grid-gallery-master

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

  5. collapsible

    JavaScriptでスムーズなコンテンツ切り替えプラグイン デモ【c…

  6. フォトギャラリー

    写真アルバム・フォトギャラリー作成・サンプル集 JavaScript・…

制作実績一覧

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

最近の記事

  1. tech-kids-school
  2. セールスライティング
  3. キーワードの選び方
  4. YouTube 集客
  5. 幼児のプログラミング教育
  6. E-A-T(専門性・権威性・信頼性)
  7. ホームページ集客
  8. instagram
  9. ameba-seo
  10. 開業
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主