web-dev-qa-db-ja.com

Bootstrap 3で複数の折りたたみを開いたままにする方法は？

ブートストラップは通常、他の折りたたみをクリックして開くと閉じます。

パネルグループの外観とレイアウトを変更せずに明示的に閉じない限り、折りたたみを開いたままにするオプションまたはハックはありますか？

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
25
trusktr

2018年に更新

ブートストラップ4

Twitterをどのように作成しますかBootstrap Accordionは1つのグループを開いたままにしますか？

ブートストラップ3

通常はアコーディオンマークアップで使用される であるdata-parent属性を削除するだけです。

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
     ...

http://bootply.com/12784

74
Zim

このデモを参照してください： http://plnkr.co/edit/OxbVII?p=preview

アイデア：

折りたたみ可能な要素の制御を自動的に割り当てるには、data-toggle="collapse"とdata-targetを要素に追加するだけです。 data-target属性は、collapseを適用するCSSセレクターを受け入れます。クラスcollapseを折りたたみ可能な要素に追加してください。デフォルトで開きたい場合は、追加のクラスinを追加します。

6
Arpit Srivastava

ブートストラップ4

ジャバスクリプトは不要

id _#accordion{{$i}}_の多くのdivを実装できます。各アコーディオンは、その親を1つ参照する_1 child_のみ

_    <div class=""
         id="accordion{{$i}}">

        <h3 class="" data-toggle="collapse"
            data-target="#collapse{{$i}}"
            aria-expanded="true"
            aria-controls="collapse{{$i}}" class="mb-0">
            Hai Im the clickable
        </h3>

        <div id="collapse{{$i}}"
             class="collapse"
             aria-labelledby="heading{{$i}}"
             data-parent="#accordion{{$i}}">
            <p>Hai Im the collapsible content</p>
        </div>
    </div>
_
0
david valentino