ヘッダーdivをクリックしたときにBootstrapアコーディオンを折りたたむ方法

167

Bootstrapアコーディオンでは、aテキストをクリックする代わりに、panel-headingdivのどこかをクリックすると折りたたむようにします。

私はBootstrap 3を使用しています。したがって、アコーディオンの代わりに、それは単に折りたたみ可能なパネルです。パネル全体をクリッカブルにする方法はありますか？

twitter-bootstrap twitter-bootstrap-3

— 9blue
ソース

さてあなたは答えを得ました。しかし、このリンクは、ブートストラップアコーディオンメニューのの異なるスタイルを見つけるのに役立ちますdesignerslib.com/bootstrap-accordion-menuを

— Karuppiah RK

292

あなたがする必要があるすべては使用することです...

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;
}

これは、Bootstrap 3のドキュメントから変更されたhtmlを含むjsfiddleです。

— 厳しい
ソース

11

これはデフォルト/デモコードである必要があるようです。<a>を使用するよりもはるかに優れています。

— dbn 2014年

この方法はiPhoneでは機能しません。stackoverflow.com/questions/19866172/…への回答ごとに、それは<a>である必要があります（hrefが必要なため）。

— ミノフスキー

2

@minovskyこの更新されたJSFiddle：jsfiddle.net/Tcgyx/60はどうですか？残念ながら、テストするiPhoneはありません。これで問題が解決した場合は、回答を更新します。

— 厳しい

@grimフィドルに感謝！いつもうまくいくとは限りませんが、もっと実験して、失敗が確実に発生するかどうかを考えさせてください。

— ミノフスキー

1

@wutzebaerあなたが持っている可能性がrole="tab button"あり、ブラウザはそれが理解するリストの最初のものを解釈します（ほとんどの場合tab）。ただし、どちらが良いのかはわかりません。tabとbutton役割の意味を見つけてみてください。そうすれば、どちらを選択するかについての答えが得られます。

— 厳しい2015

67

もう1つの方法は、の<a>すべてのスペースをいっぱいにすることpanel-headingです。これを行うには、このスタイルを使用します。

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

このデモを確認してください（http://jsfiddle.net/KbQyx/）。

次に、見出しをクリックすると、実際にはをクリックします<a>。

— 子牛
ソース

GWTBootstrapライブラリを使用している私たちにとって、すばらしいソリューションです。

— 14

同様のソリューションを実装するまで、これはわかりませんでした。CSSの変更は、私にとって最も侵襲性の少ない変更でした。私はdisplay：inline-block、width：100％を選択し、グリフィコンを使用しているため、a：beforeにはmargin-left：-10pxとmargin-right：10pxがあります。

— Kirk Liemohn 14

1

この方法はiOSデバイスでは機能しません。これは通常、Bootstrapで作業するときに主な懸念事項です。

— Jared

Jared、詳しく説明してもらえますか？なぜこれが機能しないのですか？これは特定のSafariバージョンに限定されていますか？

— Jan-Philip Gehrcke博士

1

このメソッドの利点は、AngularJSのBoostrap UI（BootstrapのJSが不要/不要）でも機能することです。

— Jan-Philip Gehrcke博士、2015年

12

grimのjsfiddleにいくつかのマイナーな欠陥があることに気づきました。

パネル全体でポインタが手に変わるようにするには：

.panel-heading {
   cursor: pointer;
}

私は<a>タグ（スタイルの問題）を削除し、ずっとやり続けdata-toggle="collapse" data-parent="#accordion" data-target="#collapse..."ましたpanel-heading。

シェブロンを表示するためのCSSメソッドを追加しました。 font-awesome.css私のjsfiddleして、：

http://jsfiddle.net/weaversnap/7FqsX/1/

— WeaverSnap
ソース

これはほとんど機能します。シェブロンは、ページが読み込まれると上下逆さまに表示され、パネルの1つを展開したり折りたたんだ後に自動的に修正されます。

— Connie DeCinko 16

@ConnieDeCinkoに変更panel-headingしpanel-heading collapsedて、逆さまの山形を修正します。

— エイミーバレット

5

これがBootstrap4のソリューションです。card-headerクラスをaタグに入れるだけです。これはW3Schoolsの例を変更したものです。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>

スニペットを展開

— user2233706
ソース

4

単純な解決策は、からパディングを削除し.panel-headingてに追加すること.panel-title aです。

.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}

このソリューションは、calfzhouが投稿した上記のソリューションと似ていますが、少し異なります。

— リズム・ルパレリア
ソース

1

実際、私のパネルにはこの折りたたみ状態の矢印アイコンがあり、私はこの投稿で他の回答を試しましたが、アイコンの位置が変更されたため、折りたたみ状態の矢印アイコンを使用した解決策を次に示します。

このカスタムCSSを追加

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

クレジットはこれにます投稿者にます。

願っています。

— Shaijut
ソース

0

これがBootstrap 4.3の実際の例です

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" >
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>

スニペットを展開

— 開発者
ソース