Bootstrap accordion won't collapse other elements when one is opened

Question

I try to make an accordion with normal accordion behaviour: there should only be one open element. I found a similar problem here: Collapse plugin: Only show one panel at a time, but the solution doesn't fit for me, as I match data-parent="#pricing-list-0 with id="#pricing-list-0" in the parent element.

Here is the code

    <div class="panel-group" id="pricing-list-0">
    <ul class="list-group">

        <li class="list-group-item">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#pricing-list-0" href="#collapse0-0" class="" aria-expanded="true">
                            Artful &amp; responsive website, ...
                        </a>
                    </h4>
                </div>
            </div>
            <div id="collapse0-0" class="panel-collapse collapse in" aria-expanded="true">
              <div class="panel-body">You give us the freedom ...</div>
            </div>                            
        </li>
[...]

Codepen is here: https://codepen.io/lafisrap/pen/YVVbev

Why is it not closing, though data-parent="#pricing-list-0" and id="pricing-list-0" are matching?

Answer 1

Bootstrap 4 update

Accordion behavior works by using data-parent on the collapsible (.collapse) element.

Bootstrap 3

As you can see in my answer here, 2 conditions must be met for the "accordion" behavior to work..

• .panel must be a child of the element used as data-parent=
• each accordion section (data-toggle=) must be a child the .panel

But, you're codepen is using Bootstrap 4, and there is no longer a panel class. Now the card class must be a child of the parent, so it would be..

<div class="panel-group" id="pricing-list-0">
     <ul class="list-group">
     <li class="list-group-item card">
       ...
     </li>
     </ul>
</div>

http://www.codeply.com/go/YGff3ecNvF