javascript & CSS 超シンプル スライディング アコーディオン【Accordion.js】

accordion_jsjavascript & CSS 超シンプル スライディング アコーディオン

「FAQ」「Q&A」に最適な軽量で滑らかなスライディング アコーディオン【Accordion.js】の設置方法をご案内します。

JavaScriptのモダンで滑らかな展開型アコーディオン【Accordion.js】

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

スマホ版プレビュー

javascript & CSS 超シンプル スライディング アコーディオン【Accordion.js】

Accordion.js デモ

著者michu2k
公式ページwebsite
デモページAccordion.js
最後の更新2019年5月10日
ライセンスMIT

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

Accordion.js ダウンロード

download

Accordion.js Download

Accordion.js 設置方法

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


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

【Accordion.js】のHTML

<div class="accordion-container">
    <div class="ac">
        <h2 class="ac-q" tabindex="0">アコーディオン1</h2>
        <div class="ac-a">
            <p>コンテンツ1</p>
        </div>
    </div>
 
    <div class="ac">
        <h2 class="ac-q" tabindex="0">アコーディオン2</h2>
        <div class="ac-a">
            <p>コンテンツ2</p>
        </div>
    </div>
 
    <div class="ac">
        <h2 class="ac-q" tabindex="0">アコーディオン3</h2>
        <div class="ac-a">
            <p>コンテンツ3</p>
        </div>
    </div>
</div>  

アコーディオンを初期化

<script>
    new Accordion('.accordion-container'); 
</script>

オプション

var accordion = new Accordion({
    duration: 600, // animation duration in ms {number}
    itemNumber: 0, // item number which will be shown {number}
    aria: true, // add ARIA elements to the HTML structure {boolean}
    closeOthers: true, // show only one element at the same time {boolean}
    showItem: false, // always show element that has itemNumber number {boolean}
    elementClass: 'ac', // element class {string}
    questionClass: 'ac-q', // question class {string}
    answerClass: 'ac-a', // answer class {string}
    targetClass: 'ac-target' // target class {string}
});

【Accordion.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.js</title>
    <link rel="stylesheet" href="style.css">
 
<link rel="stylesheet" href="css/accordion.css">
 
</head>
<body>
<div class="main-container">
 
<h1>JavaScriptのモダンで滑らかな展開型アコーディオン【Accordion.js】</h1>
 
<div class="accordion-container">
    <div class="ac">
        <h2 class="ac-q" tabindex="0">アコーディオン1</h2>
        <div class="ac-a">
            <p>コンテンツ1</p>
        </div>
    </div>
 
    <div class="ac">
        <h2 class="ac-q" tabindex="0">アコーディオン2</h2>
        <div class="ac-a">
            <p>コンテンツ2</p>
        </div>
    </div>
 
    <div class="ac">
        <h2 class="ac-q" tabindex="0">アコーディオン3</h2>
        <div class="ac-a">
            <p>コンテンツ3</p>
        </div>
    </div>
</div>  
 
</div>
 
  <script src="js/accordion.min.js"></script>
<script>
    new Accordion('.accordion-container'); 
</script>
 
    </div>
</body>
</html>

Accordion.js Download

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

お問い合わせはこちら

関連記事

  1. grid-gallery-master

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

  2. lightbox2

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

  3. フォトギャラリー

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

  4. collapsible

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

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

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

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

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

制作実績一覧

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

最近の記事

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