Two different bootstrap accordion trigger each other

Question

As you can on the example bootlint is fine and all IDs unique but two diffrent collapsable accordion triggers each other. Still looking for solution.

Live example : http://codepen.io/bertanyaman/pen/NNOLyG

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
            <div id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                                href="#collapseOne" aria-expanded="true"
                                aria-controls="collapseOne">Collapsible Group Item #1</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in"
                        role="tabpanel" aria-labelledby="headingOne">
                        Anim pariatur cliche reprehenderit...
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse"
                                data-parent="#accordion" href="#collapseTwo"
                                aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse"
                        role="tabpanel" aria-labelledby="headingTwo">
                        Anim pariatur cliche reprehenderit...
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse"
                                data-parent="#accordion" href="#collapseThree"
                                aria-expanded="false" aria-controls="collapseThree">Collapsible Group Item #3</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse"
                        role="tabpanel" aria-labelledby="headingThree">
                        Anim pariatur cliche reprehenderit...
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div id="accordion2" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne2">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion2"
                                href="#collapseOne2" aria-expanded="true"
                                aria-controls="collapseOne2">Collapsible Group Item
              #1</a>
                        </h4>
                    </div>
                    <div id="collapseOne2" class="panel-collapse collapse in"
                        role="tabpanel" aria-labelledby="headingOne2">
                        Anim pariatur cliche reprehenderit...
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo2">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse"
                                data-parent="#accordion2" href="#collapseTwo2"
                                aria-expanded="false" aria-controls="collapseTwo2">Collapsible Group Item #2</a>
                        </h4>
                    </div>
                    <div id="collapseTwo2" class="panel-collapse collapse"
                        role="tabpanel" aria-labelledby="headingTwo2">
                        Anim pariatur cliche reprehenderit...
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree2">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse"
                                data-parent="#accordion2" href="#collapseThree2"
                                aria-expanded="false" aria-controls="collapseThree2">Collapsible Group Item #3</a>
                        </h4>
                    </div>
                    <div id="collapseThree2" class="panel-collapse collapse"
                        role="tabpanel" aria-labelledby="headingThree2">
                        Anim pariatur cliche reprehenderit...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

I see your code example on CodePen is using TWBS 4-alpha2 versions of the css and js. If you revert to TWBS 3.3.6 (and JQuery 1) then your code works.

See this prior question 25359335, and it's JSFiddle

I copied this working code to your CodePen and it broke too, but then I reverted to 3.3.6 and it worked again.

This is a known bug in V4

<sorry> :( </sorry>