1. ホーム
  2. twitter-bootstrap

[解決済み] 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 ドキュメント .