Bootstrap3
日本語リファレンス
広告
  1. Bootstrap3日本語リファレンス
  2. JavaScript
  3. コラップス
  4. オプション一覧表
  5. parentオプション

parentオプション

コラップス（collapse.js）におけるparentオプションは、特定の要素内における開閉式のコンテンツのうち、何れかひとつのコンテンツを開くと他のコンテンツを閉じるようにできるオプション。

属性値一覧表 data-parent属性に指定 parentオプションを指定しないサンプル

属性値一覧表

初期設定値は、falseである。

属性値 説明
セレクター セレクターで指定した要素内における開閉式のコンテンツのうち、何れかひとつのコンテンツを開くと、他のコンテンツを閉じる。
false 指定なし。
初期設定値。
広告

data-parent属性に指定

data-parent属性を追加し、セレクターを指定する。

サンプル

タイトルＡ

タイトルＡのコンテンツ

タイトルＢ

タイトルＢのコンテンツ

タイトルＣ

タイトルＣのコンテンツ
ソースコード

HTML

<div class="panel-group" id="sampleAccordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				<a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse1">
					タイトルＡ
				</a>
			</h3>
		</div>
		<div id="sampleAccordionCollapse1" class="panel-collapse collapse in">
			<div class="panel-body">
				タイトルＡのコンテンツ
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				<a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse2">
					タイトルＢ
				</a>
			</h3>
		</div>
		<div id="sampleAccordionCollapse2" class="panel-collapse collapse">
			<div class="panel-body">
				タイトルＢのコンテンツ
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				<a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse3">
					タイトルＣ
				</a>
			</h3>
		</div>
		<div id="sampleAccordionCollapse3" class="panel-collapse collapse">
			<div class="panel-body">
				タイトルＣのコンテンツ
			</div>
		</div>
	</div>
</div>

parentオプションを指定しないサンプル

parentオプションを指定しないアコーディオンのサンプル。

サンプル

タイトルＡ

タイトルＡのコンテンツ

タイトルＢ

タイトルＢのコンテンツ

タイトルＣ

タイトルＣのコンテンツ
ソースコード

HTML

<div class="panel-group">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				<a data-toggle="collapse" href="#sampleAccordionCollapse21">
					タイトルＡ
				</a>
			</h3>
		</div>
		<div id="sampleAccordionCollapse21" class="panel-collapse collapse in">
			<div class="panel-body">
				タイトルＡのコンテンツ
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				<a data-toggle="collapse" href="#sampleAccordionCollapse22">
					タイトルＢ
				</a>
			</h3>
		</div>
		<div id="sampleAccordionCollapse22" class="panel-collapse collapse">
			<div class="panel-body">
				タイトルＢのコンテンツ
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">
				<a data-toggle="collapse" href="#sampleAccordionCollapse23">
					タイトルＣ
				</a>
			</h3>
		</div>
		<div id="sampleAccordionCollapse23" class="panel-collapse collapse">
			<div class="panel-body">
				タイトルＣのコンテンツ
			</div>
		</div>
	</div>
</div>
広告