[解決済み] Bootstrapのアコーディオンを、ヘッダーDivをクリックしたときに折りたたむようにするには?
2022-04-23 03:01:02
質問
Bootstrapのアコーディオンでは、クリックが必要な代わりに
a
のテキストをクリックすると折りたたまれるようにしたい。
panel-heading
div.
Bootstrap3を使っています。なので、アコーディオンの代わりに、ただの折りたたみ式パネルになっています。パネル全体をクリックできるようにするにはどうしたらいいでしょうか?
どのように解決するのですか?
必要なのは...
-
data-toggle="collapse"
-
data-target="#ElementToExpandOnClick"
...クリックすると、折りたたみ/展開の効果を発動させたい要素上で。
が付いている要素は
data-toggle="collapse"
がエフェクトのトリガーとなる要素になります。
このとき
data-target
属性は、効果が発生したときに展開される要素を示しています。
オプションで
data-parent
は、独立した折りたたみ式ではなく、アコーディオン効果を出したい場合など。
-
data-parent="#accordion"
また、以下のようなCSSを要素に追加します。
data-toggle="collapse"
でない場合は
<a>
タグのようなものです。
.panel-heading {
cursor: pointer;
}
ここで jsfiddle のhtmlを修正したものです。 Bootstrap 3 ドキュメント .
関連
-
[解決済み] SCSSファイルエラー。インポートするファイルが見つからないか読めません: bootstrap
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] ブートストラップ・モーダルにデータを渡す
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて
-
[解決済み】これらの属性は何ですか。アリア・ラベリングビー`とアリア・ヒドゥン`です。
-
[解決済み】Bootstrap Modalがすぐに消えてしまう。
-
[解決済み] Twitter Bootstrapを使用して垂直方向の空白を追加しますか?
-
[解決済み] Bootstrap 3 のスタックドタブ
-
[解決済み] Bootstrapがline-heightプロパティを1.428571429に設定する理由は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Bootstrapのモーダルが表示されない
-
[解決済み] Bootstrap 4のColでコンテンツを下に揃える方法
-
[解決済み] BootstrapでNavbarが折りたたまれない
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み】Bootstrap 3 ナンバーバーの折りたたみについて
-
[解決済み】これらの属性は何ですか。アリア・ラベリングビー`とアリア・ヒドゥン`です。
-
[解決済み] Bootstrapのアコーディオンを、ヘッダーDivをクリックしたときに折りたたむようにするには?
-
[解決済み] Twitter Bootstrapのテーブルの幅が常に100%なのはなぜですか?
-
[解決済み] レスポンシブWebサイトがモバイルで全幅に拡大表示される。
-
[解決済み] Twitter Bootstrapのモーダルでエスケープキーを使って閉じる機能を有効にするにはどうしたらいいですか?