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

サイト内検索

最近の投稿

アイキャッチ
macOS Mojaveで特定のアプリが動作しなくなったときの設定

今回はMacトラブルについてです。今まで使っていた人はおそらくこの設定は知っている人が多いかもしれませんが、初めてMacを使った人はこれで悩んでいる人が多いかもしれません。今回はロジクールマウス...

09 Jan 2019

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年もよろしくお願いします。 今年の初詣は寒波の影響でかなり寒かったですが比較的天候も良く人も多かった気がしますね。 本年は熊野大社に大晦日深夜の初詣にい...

04 Jan 2019

アイキャッチ
年末年始のお知らせ

今年ももう終わりですね。 当事務所は12/29〜1/6までお休みでございます。 1/7日から営業開始いたします。 よろしくお願いします。 ### 年末年始の営業時間 12/29-1...

29 Dec 2018

アイキャッチ
鳥取砂丘いくならおすすめの砂の美術館

先日の3連休に鳥取砂丘近くにある砂の美術館に行ってきました。この日はたまたまイベント期間中で3Dプロジェクションマッピングも見ることが出来、30分おきに上映していたので実際は10分弱ぐらいの映像...

28 Dec 2018

アイキャッチ
ワードプレスでグーグルマップを簡単に表示させるプラグイン

さて、今回は簡単に地図を設置できるプラグインのご紹介です。あまりにも有名なので説明が不要かと思いますが、簡単に説明しますと要は地図表示です。私はグーグルマップをプラグインでの表示はしたことなかっ...

19 Dec 2018

著者

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

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

フッターイメージ