「FAQ」「Q&A」に最適なコンテンツ切り替えアコーディオン【collapsible.js】の設置方法をご案内します。
お好きな見出しからどうぞ
JavaScriptでスムーズなコンテンツ切り替えプラグイン【collapsible.js】
collapsible.jsは、依存関係のないコンテンツ トグルJavaScriptプラグインで、アコーディオンのようにコンテンツパネルをスムーズに折りたたむことができます。
スマホ版プレビュー
| 著者 | Murtada al Mousawy |
|---|---|
| 公式ページ | website |
| デモページ | collapsible.js |
| 最後の更新 | 2018年8月13日 |
| ライセンス | MIT |
LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上（css、html）内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照：MITライセンス（日本語翻訳）
collapsible.js ダウンロード
collapsible.js 設置方法
スタイルシート（css）『style.css』は<head”></head”>内に記述！ JavaScriptは『collapsible.js』『demo.js』<body></body>内に記述します。
<link rel="stylesheet" href="style.css">
<script src="collapsible.js"></script>
<script src="demo.js"></script>
【collapsible.js】のHTML
【collapsible.js】タイプＡ
<div class="category list-a" data-collapsible>
<div class="category__title"><span>【collapsible.js】タイプＡ</span></div>
<div class="block" data-collapsible>
<div class="block__title"><h3>アコーディオン1</h3></div>
<div class="block__content">
<p>コンテンツ1</p>
</div>
</div>
<div class="block" data-collapsible>
<div class="block__title"><h3>アコーディオン2</h3></div>
<div class="block__content">
<p>コンテンツ2</p>
<p>コンテンツ2-1</p>
<p>コンテンツ2-2</p>
</div>
</div>
<div class="block" data-collapsible>
<div class="block__title"><h3>アコーディオン3</h3></div>
<div class="block__content">
<p>コンテンツ3</p>
<p>コンテンツ3-1</p>
</div>
</div>
</div>
【collapsible.js】タイプＢ
<div class="category list-b" data-collapsible data-collapsible-collapsed>
<div class="category__title"><span>【collapsible.js】タイプＢ</span></div>
<div class="block" data-collapsible>
<div class="block__title"><h3>アコーディオン1</h3></div>
<div class="block__content">
<p>コンテンツ1</p>
</div>
</div>
<div class="block" data-collapsible>
<div class="block__title"><h3>アコーディオン2</h3></div>
<div class="block__content">
<p>コンテンツ2</p>
<p>コンテンツ2-1</p>
<p>コンテンツ2-2</p>
</div>
</div>
<div class="block" data-collapsible>
<div class="block__title"><h3>アコーディオン3</h3></div>
<div class="block__content">
<p>コンテンツ3</p>
<p>コンテンツ3-1</p>
</div>
</div>
</div>
【collapsible.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>collapsible.js</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>JavaScriptでスムーズなコンテンツ切り替えプラグイン【collapsible.js】</h1>
<div class="category list-a" data-collapsible>
<div class="category__title"><span>【collapsible.js】タイプＡ</span></div>
<div class="block" data-collapsible>
<div class="block__title"><h3>アコーディオン1</h3></div>
<div class="block__content">
<p>コンテンツ1</p>
</div>
</div>
<div class="block" data-collapsible>
<div class="block__title"><h3>アコーディオン2</h3></div>
<div class="block__content">
<p>コンテンツ2</p>
<p>コンテンツ2-1</p>
<p>コンテンツ2-2</p>
</div>
</div>
<div class="block" data-collapsible>
<div class="block__title"><h3>アコーディオン3</h3></div>
<div class="block__content">
<p>コンテンツ3</p>
<p>コンテンツ3-1</p>
</div>
</div>
</div>
<script src="collapsible.js"></script>
<script src="demo.js"></script>
</div>
</body>
</html>
こんにちは。【検索上位表示ホームページ制作】中小企業様の集客に特化したコンテンツ作成＆Webマーケティングのアドバイザーをしております。貴社の魅力を引き出し大企業と渡り合えるコンテンツ作りには自信がございます。Web事業歴15年目。「地域一番を目指したい」と言うweb担当者様お気軽にご相談ください。