Почему не закрываются collapse в Bootstrap 3?

Question

[Layan]

Здравствуйте!
Есть проблема при использовании Bootstrap Collapse:

<div class="col-md-8" id="hPortfolio">
                <div id="hPartners" class="hFontBold">
                    <a alt="" target="_blank" id="labelP1" class="showProjects"
                       data-toggle="collapse" data-parent="#hPortfolio" href="#project1" aria-expanded="true" aria-controls="project1">
                        Bridge24
                    </a>
                    <a  alt="" target="_blank" id="labelP2" class="showProjects"
                       data-toggle="collapse" data-parent="#hPortfolio" href="#project2" aria-expanded="true" aria-controls="project2">
                        Jupiter.INSTITUTE
                    </a>
                    <a alt="" target="_blank" id="labelP3" class="showProjects"
                       data-toggle="collapse" data-parent="#hPortfolio" href="#project3" aria-expanded="true" aria-controls="project3">
                        Finprofile
                    </a>
                    <a  alt="" target="_blank" id="labelP4" class="showProjects"
                        data-toggle="collapse" data-parent="#hPortfolio" href="#project4" aria-expanded="true" aria-controls="project3">
                        RaRaStudio
                    </a>
                </div>
                <div class="accordion-group" id="accordion" aria-multiselectable="true">
                    <div id="project1" class="panel-collapse collapse in" role="tabpanel"  aria-labelledby="labelP1">
                        1asd

                    </div>
                    <div id="project2" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="labelP2">
                        2asd

                    </div>
                    <div id="project3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="labelP2">
                        3asd

                    </div>
                    <div id="project4" class="panel-collapse collapse" role="tabpanel"   aria-labelledby="labelP3">
                        4asd
                    </div>
                </div>
            </div>

Однако при клике на любую ссылку происходит только открытие одного блока, в то время как я ожидаю закрытие всех открытых до этого (как описано в документации)

Answer 1

[Андрей Еськов]

Они и не должны закрываться. Но вы можете воспользоваться событиями.

И при открытии одного блока закрывать другой, вот пример кода.

//При открытии блока 1 закрывать блок 2
$('#one').on('show.bs.collapse', function () {
    $('#two').collapse('hide')
});

//При открытии блока 2 закрывать блок 1
$('#two').on('show.bs.collapse', function () {
    $('#one').collapse('hide')
});

Answer 2

[karakum22]

В документации сказано, что если указан атрибут data-parent, то все открытые блоки будут закрываться при выборе текущего. Так же сказано, что есть зависимость от класса panel.

Пример:

<div id="parent">
  <div>
    <button class="btn btn-default" type="button" data-parent="#parent" data-toggle="collapse" data-target="#collapseAudi" aria-expanded="false" aria-controls="collapseAudi">
      Audi </button>
    <button class="btn btn-default" type="button" data-parent="#parent" data-toggle="collapse" data-target="#collapseLexus" aria-expanded="false" aria-controls="collapseLexus">
      Lexus </button>
    <button class="btn btn-default" type="button" data-parent="#parent" data-toggle="collapse" data-target="#collapseMazda" aria-expanded="false" aria-controls="collapseMazda">
      Mazda </button>
  </div>
  <div class="panel">
    <div id="collapseAudi" class="collapse" aria-expanded="false">
      <div class="well">
        <ul class="list-unstyled">
          <li>Audi Q5</li>
        </ul>
      </div>
    </div>
    <div id="collapseLexus" class="collapse" aria-expanded="false">
      <div class="well">
        <ul class="list-unstyled">
          <li>Lexus IS</li>
        </ul>
      </div>
    </div>
    <div id="collapseMazda" class="collapse" aria-expanded="false">
      <div class="well">
        <ul class="list-unstyled">
          <li>Mazda 3</li>
          <li>Mazda 6</li>
          <li>Mazda CX-5</li>
        </ul>
      </div>
    </div>
  </div>
</div>