JavaScriptでスムーズなコンテンツ切り替えプラグイン デモ【collapsible.js】

collapsible

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

JavaScriptでスムーズなコンテンツ切り替えプラグイン【collapsible.js】

collapsible.jsは、依存関係のないコンテンツ トグルJavaScriptプラグインで、アコーディオンのようにコンテンツパネルをスムーズに折りたたむことができます。

スマホ版プレビュー

collapsible-master

collapsible.js デモ

著者Murtada al Mousawy
公式ページwebsite
デモページcollapsible.js
最後の更新2018年8月13日
ライセンスMIT

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

collapsible.js ダウンロード

download

collapsible.js Download

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】タイプA

<div class="category list-a" data-collapsible>
	<div class="category__title"><span>【collapsible.js】タイプA</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】タイプB

	<div class="category list-b" data-collapsible data-collapsible-collapsed>
		<div class="category__title"><span>【collapsible.js】タイプB</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】タイプA</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>

collapsible.js Download

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

お問い合わせはこちら

関連記事

  1. grid-gallery-master

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

  2. hes-gallery-master

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

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

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

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

  5. tiles_grid_video

    YouTube 動画のスライドショー📽をホームページへ…

  6. vanilla-zoom-js

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

制作実績一覧

  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(ジンドゥ)