JavaScriptのモダンで滑らかな展開型アコーディオン【accordion-init】

accordion-init

「FAQ」「Q&A」に最適な滑らかな展開型アコーディオン【accordion-init】の設置方法をご案内します。

JavaScriptのモダンで滑らかな展開型アコーディオン【accordion-init】

複雑なライブラリなしで使用するJavaScriptライブラリ

スマホ版プレビュー

JavaScriptのモダンで滑らかなアコーディオン デモ - accordion-init

Accordion-Init デモ

著者denizhacisalihoglu
公式ページwebsite
デモページaccordion-init
最後の更新2018年8月22日
ライセンスMIT

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

accordion-init ダウンロード

download

accordion-init Download

accordion-init 設置方法

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


<link rel=”stylesheet” href=”dist/css/accordion.min.css”>
<script src=”dist/js/accordion.min.js”></script>

accordion-initのHTML

<div class="accordion-container">
  <div class="panel">
    <div class="heading">1. アコーディオン</div>
    <div class="content">
      <p>コンテンツ 1</p>
    </div>
  </div>
  <div class="panel">
    <div class="heading">2. アコーディオン</div>
    <div class="content">
      <p>コンテンツ 2</p>
    </div>
  </div>
  <div class="panel">
    <div class="heading">3. アコーディオン</div>
    <div class="content">
      <p>コンテンツ 3</p>
    </div>
  </div>
</div>

アコーディオンコンポーネントを初期化

var accordion = new Accordion('.accordion-container');

アコーディオン設定

var accordion = new Accordion('.accordion-container',{
 
    // hides all answers
    hideAll: false,
 
    // shows all answers
    showAll: false,
 
    // shows the first answer
showFirst: false,   // panel ID you want to show at first time
panelId: null   });

accordion-initのソースコード設置例


<!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-init</title>
    <link rel="stylesheet" href="style.css">
 
    <link rel="stylesheet" href="dist/css/accordion.min.css">
 
</head>
<body>
    <div class="main-container">
 
<h1>JavaScriptのモダンで滑らかなアコーディオン デモ - accordion-init</h1>
 
        <div class="accordion-container">
 
            <div class="panel">
                <div class="heading">1.アコーディオン</div>
                <div class="content">
                    <p>コンテンツ1</p>
                </div>
            </div>
 
            <div class="panel">
                <div class="heading">2.アコーディオン</div>
                <div class="content">
                    <p>コンテンツ2</p>
                </div>
            </div>
 
            <div class="panel">
                <div class="heading">3.アコーディオン</div>
                <div class="content">
                    <p>コンテンツ3</p>
                </div>
            </div>
 
        </div>
 
    </div>
 
    <script src="dist/js/accordion.min.js"></script>
    <script>
    var accordion = new Accordion('.accordion-container');
    </script>
 
    </div>
</body>
</html>

accordion-init Download

「集客」無料相談承ります!

お問い合わせはこちら

関連記事

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

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

  2. vanilla-zoom-js

    Vanilla JavaScriptでズーム可能な画像ギャラリー【va…

  3. CSS + HTML だけのアコーディオン

    CSS + HTML だけのアコーディオン(Accordion)メニュ…

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

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

  5. 滑らかな垂直アコーディオンパネル

    滑らかな垂直アコーディオン パネル【Accordion Panel】

  6. easy-responsive-tabs-to-accordion

    水平または垂直タブをアコーディオンに最適化する軽量のjQueryプラグ…

制作実績一覧

  1. 行田市 三島造園有限会社
  2. 行田市リサイクルイズミ
  3. スパイシーベジーカレー
  4. bacchus
  5. ふじぜんリニューアル後
  6. legend-planning
  7. ポスティングこころざし様
  8. インテリアコーディネーター小島真子

最近の記事

  1. セルフSEO対策
  2. STORES 予約
  3. 無料で予約サイトが作れる【MOSH】
  4. 第三者の影響力 ウィンザー効果
  5. 『お客様の声』アンケート
  6. コアウェブバイタル(Core Web Vitals)
  7. FAQリッチリザルト
  8. WordPress
  9. Ameba Ownd(アメーバオウンド)
  10. Jimdo(ジンドゥ)