Bootstrap3のアコーディオンメニューを縦から横列に表示

Bootstrap3のアコーディオンメニューを縦から横列に表示

2016-04-23 最終更新日:2016-04-23

CSSのフレームワークを使って制作されている方、特に手っ取り早く良い感じのデザインが出来るBootstrapを使っている方は多いと思います。私もその一人です。

Bootstrap1.4の段階から便利に使わせてもらっております。使いやすくてカスタマイズしやすいです。当初はLESSだったのですが最近になってSASSになりとても便利になりましたね。

さて本題です。Bootstrap3のCollapse collapse.jsの項目にアコーディオンメニューのサンプルがあります。このサンプルはひとまとまりにしてありますが、どうにかカラムにいれて列にしたいと思って調べました。中々無いんですね。

海外のFAQで同じような質問をしている方がいらしたので同じようにしたらうまくいきましたのでその設定を載せておきます。


スポンサーリンク


Accordion

ブートストラップのサンプルのものを横列にしたものです。ちょうどサンプルも3つになっていたのでカラムをcol-md-4にしてあります。実はこのままでは動きません。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	<div class="row">
		<div class="col-md-4">
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingOne">
					<h4 class="panel-title">
					<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					Collapsible Group Item #1
					</a>
					</h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
					<div class="panel-body">
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingTwo">
					<h4 class="panel-title">
						<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
						Collapsible Group Item #2
						</a>
					</h4>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
					<div class="panel-body">
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="panel panel-default">
				<div class="panel-heading" role="tab" id="headingThree">
					<h4 class="panel-title">
					<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
					Collapsible Group Item #3
					</a>
					</h4>
				</div>
				<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
					<div class="panel-body">
						Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

ブートストラップを読み込んだ後に次のスクリプトを埋め込むとうまくアコーディオンメニューが表示できます。

<script src="/path/to/bootstrap.min.js"></script>
<script>
$('#accordion').on('show.bs.collapse', function() {
	$('#accordion .in').collapse('hide');
});
</script>

これでうまくいきます。デモで確認してみてください。

⇒デモを見てみる


∞Tadashi Suyama∞

bootstrap css web ブートストラップ
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
とっとりバーガーフェスタ2017(第7回)に行ってきました

去年も載せましたが今回も行ってきたので感想などを書いてみたいと思います。[⇒去年の記事はコチラ](/blog/private/2016/10/11/burgerfesta.html) 今年も行...

09 Oct 2017

アイキャッチ
ワードプレスでテーマの編集が出来ない対処方法

さて、今回はワードプレスのテーマ編集についてです。テスト用サイトでふと気がついたのですが、あれ?テーマ編集が出来なくなっている!セキュリティ上なくしたのかと思いました。現状のバージョンは4.8....

06 Oct 2017

アイキャッチ
新しくなったfotorの使い方

fotorのサイトが一新されました。HTML5で書き直されて高いパフォーマンスが期待できます。 新しくなった部分のみ記載しておりますので機能的に見たい方は[⇒以前の記事](/blog/app/...

01 Oct 2017

アイキャッチ
WordPressのプラグインReallySimpleSSLを手動で解除する方法

さて今回もトラブル系です。Let's Encryptがいろいろなサーバーに取り入れられ手軽にSSL化が出来るようになりましたが、まだ対応できていないサーバーも多いです。 ワードプレスを入れた際...

23 Sep 2017

アイキャッチ
バックドア型ウィルスにかかった時のワードプレスセキュリティ対策

今回はセキュリティについてご紹介したいと思います。ワードプレスでのセキュリティ対策って何をすれば良いの?という方も多いかと思います。相談が多かったので記事にしました。 ほんとうは怖いワードプレ...

14 Sep 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ