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. easy-responsive-tabs-to-accordion

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

  2. imagehover.css-master

    マウスオーバーで画像アニメーション表示する44種類のCSS【Image…

  3. lightbox2

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

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

    javascript & CSS 超シンプル スライディング…

  5. handy-collapse

    アコーディオンメニュー内にアコーディオン【handy-collapse…

  6. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

制作実績一覧

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

最近の記事

  1. ホームページで求人獲得
  2. プロカメラマン
  3. Googleマイビジネス
  4. 会社概要
  5. ドメイン
  6. エックスサーバー
  7. さくらレンタルサーバ
  8. レンタルサーバー ロリポップ
  9. レンタルサーバー選び