Как вы сохраняете множественные обрывы в Bootstrap 3?

Bootstrap обычно закрывает другие коллапсы, когда вы нажимаете на один, чтобы открыть его.

Есть ли опция или взломать ее, чтобы она оставалась открытой, если явно закрыто, не меняя внешний вид и макет панели?

Ответ 1

Обновление 2018

Bootstrap 4

Как вы заставляете Twitter Bootstrap Accordion держать одну группу открытой?

Bootstrap 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/127843

Ответ 2

Смотрите эту демонстрацию: http://plnkr.co/edit/OxbVII?p=preview

Идея:

Просто добавьте элемент data-toggle="collapse" и data-target в элемент, чтобы автоматически назначить управление сбрасываемым элементом. Атрибут data-target принимает селектор CSS для применения collapse to. Не забудьте добавить класс collapse к сбрасываемому элементу. Если вы хотите открыть его по умолчанию, добавьте дополнительный класс in.

Ответ 3

Bootstrap 4

НЕ НУЖЕН JAVASCRIPT

может реализовать много div с id #accordion{{$i}} каждый аккордеон имеет только 1 child который ссылается на 1 своего родителя

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