bootstrap collapsible menu is not collapsing after another panel is selected

Step1:

Welcome to designer blog, here we are going to discuss about,  How to make the current collapse panel open when another panel is selected or clicked  without closing the previous panel.


Step2:

In Bootstrap Default Mark-up come with class Panel-group and Id = "accordion". This  id accordion will be called in each item of panel heading as the data-parent (Data - Attribute)  with below code

 <a role="button"  data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="trigger collapsed">
          Collapsible Group Item #1
        </a>

Bootstrap collapsible menu works default as When the current  panel is opened and if you want to  Click on other panel will be closing previous panel and opening the current one.


Html Markup: 

 <div class="panel-group" 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 role="button"  data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="trigger collapsed">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi molestiae dolorum, soluta temporibus vero perferendis quo odit eaque cum fugiat nihil earum error vitae libero nostrum sed ipsam, beatae ea.
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a role="button" data-parent="#accordion"  data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="trigger collapsed">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Sunt quia aperiam, officiis tempora quis quasi fugit ab ipsa quo expedita reiciendis quod iusto! Enim delectus unde voluptatem officiis molestiae repudiandae.
      </div>
    </div>
  </div>
</div>

 </div>




Step3:

As per our scenario,  when the current  panel is opened and if you want to click on other panel it should not closing  the previous panel and opening the current one. Opened panel should be close by toggling effect.

 for this you have to remove the  below div as well as  data-parent="#accordion"

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">


Step4:

Output:

Thanks for reading my article.Stay Tune on www.webdesignersdairy.com  for more updates on SharePoint.