How can i handle strange behavior of bootstrap div collapse and expand

Question

Hi i just created a question which is related to this thread . But i found strange behavior of bootstrap below: (please look at my previous question : https://stackoverflow.com/questions/39786787/how-to-handle-collapse-expand-all-with-single-click-accordion-work-together-in-b )

i have 2 different panel group because i added some paragraph between them.

 <div class="row extra-left-padding-0">

<div class="spaced-columns">
    <div class="container">


        <button class="collapse-init">Click to disable accordion behavior</button>
        <br />
    </div>

    <div class="container">
        <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">

                    <legend class="col-xs-6 col-sm-5 control-label">1-Yönetici Degerlendirme</legend>
                    <div class="col-xs-6 col-sm-2 col-sm-height col-sm-top">
                        <div id="g0"></div>

                    </div>
                    <div class="clearfix visible-xs-block"></div>
                    <div class="col-xs-4 col-sm-3">
                        <h4>Axp/10 : 
                          </h4>
                    </div>
                    <div class="col-xs-2 col-sm-2">

                    </div>
                </div>
            </div>
        </div>
        <div class="panel-group" id="accordion0">
            <div class="panel panel-default">
                <div class="panel-heading" data-parent="#accordion0" data-target="#collapse0" data-toggle="collapse" role="button">
                    <h4 class="panel-title accordion-toggle">1-Yönetici Değerlendirme Kriterler
      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                </div>
                <div class="panel-collapse collapse" id="collapse0" role="tabpanel">
                    <div class="panel-body">
                        test0

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">


        <div class="row">
            <div class="panel panel-default">
                <div class="panel-body">

                    <legend class="col-xs-6 col-sm-5 control-label">2-Piyasa Ve Şirket içi İstihbarat</legend>
                    <div class="col-xs-6 col-sm-2 col-sm-height col-sm-top">
                        <div id="g1"></div>


                    </div>
                    <div class="clearfix visible-xs-block"></div>
                    <div class="col-xs-6 col-sm-3">
                        <h4>Axp/10 : 
                        </h4>
                    </div>
                    <div class="col-xs-2 col-sm-2">

                    </div>
                </div>
            </div>
        </div>
        <div class="panel-group" id="accordion1">
            <div class="panel panel-default">
                <div class="panel-heading" data-parent="#accordion1" data-target="#collapse1" data-toggle="collapse" role="button">
                    <h4 class="panel-title">2-Piyasa Ve Şirket içi İstihbarat Kriterler
      <i class="fa fa-chevron-down fa pull-right"></i>
                    </h4>
                </div>
                <div  class="panel-collapse collapse" id="collapse1" role="tabpanel">
                    <div class="panel-body">
                        TEST
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
    </div>

LOOK AT THIS STRANGE BEHAVIOR :

( This one is not working. Not collapsing. )

  $('#accordion1').on('show.bs.collapse', function () {
            $('#collapse1').collapse('hide');
            console.log('collpase0 is clicked');
        });

But if i change this;

 $('#accordion1').on('show.bs.collapse', function () {
            $('#collapse0').collapse('hide');
            console.log('collpase0 is clicked');
        });

i made collapse1 id to collapse0, if i click accrodion1 collapsing is working for accordion0 but if i do that :

  $('#accordion1').on('show.bs.collapse', function () {
            $('#collapse1').collapse('hide');
            console.log('collpase0 is clicked');
        });

it is tring to collapse but does not success Not working how can i solve it? if i click accordion0 it should collapse its content.

Answer 1

Let me get this right, you are trying to create an accordion effect with paragraph in between such that if you open one panel the other panel should close? Is that right, if that is the case then you need to simply alternate the collapse actions. Here is a fiddle I created from your code that shows this https://jsfiddle.net/icerebellion/c59jk54h/1/

$('#accordion0').on('show.bs.collapse', function() {
     $('#collapse1').collapse('hide');
     console.log('collpase0 is clicked');
   });
   $('#accordion1').on('show.bs.collapse', function() {
     $('#collapse0').collapse('hide');
     console.log('collpase1 is clicked');
   });