Why doesn't collapse close in Bootstrap 3?

Question

JavaScript

Hello!
There is a problem when using 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>

However, when clicking on any link, only one block opens, while I expect all previously open ones to close (as described in the documentation)

Answer 1

They shouldn't be closed. But you can use events.
And when opening one block, close another, here is a code example.

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

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

Answer 2

The documentation says that if the attribute is specified data-parent, then all open blocks will be closed when the current one is selected. It also says that there is a dependency on the class panel.
Example:

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