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

サイト内検索

最近の投稿

アイキャッチ
ワードプレスで最強のおすすめバックアッププラグインは・・・!?

あってて良かったバックアップデータということが多々ある今日この頃でございます。 多くの利用者がいるワードプレスなんですが、実は多いが故に狙われてしまうことも多いのです。壊れてしまったり、ウィル...

24 Feb 2018

アイキャッチ
fontawesome5の使い方

アイコンフォントで最も有名なfontawesomeですが5になってますます使い勝手が向上しました。推奨はJSを使ったSVGと表示となっております。Webで最も人気のあるアイコンセットをFontA...

18 Feb 2018

アイキャッチ
自作アイコンをSVGでの表示方法

そもそもSVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)で、拡大縮小、変形してもキレイなままでぼやけず荒れないXMLベースの画像のことです。W...

13 Feb 2018

アイキャッチ
なりすまし・フィッシングメール対策のDMARCとは

DMARC(ディーマーク)とは迷惑メールの送信者から偽装を防ぐ仕組みになります。まだ対応サーバーは少ない気がします。 その仕組みに当たってSPFとDKIM(ディーキム)も知る必要があります。こ...

03 Feb 2018

アイキャッチ
いつもの定型文をDashに登録、便利なスニペット機能

Dashとは、ドキュメントマニュアルとコードスニペットマネージャになります。 サポートされているマニュアルは150の以上あり、オフライン環境でのドキュメントを検索することができます。そしてエデ...

27 Jan 2018

著者

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

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

フッターイメージ