我该如何强迫手风琴一次打开一个？

Question

我有2个手风琴。

---

如何强制它打开了一个在同一时间？

---

HTML

<div id="course-summary-container"> 
    <!-- Append Course Summary Banner Here --> 
    <div class="row" style="padding: 0px 60px;"> 
     <div class="panel-group " id="accordion" role="tablist" aria-multiselectable="true"> 
      <div class="panel course-summary "> 
       <div class="panel-heading panel-0" role="tab" id="heading-0"><span class="pull-left left"><div class="panel-title h1">Course Summary</div><div class="panel-title h2" id="course-name">Advanced 1: Common Core</div></span><span class="pull-right right show-score-0 " data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="true" aria-controls="collapse0"><div><img src="http://s6.postimg.org/ramwlv83h/report_blue.png" width="30"></div><a class="h3" role="button">VIEW REPORT</a></span><span class="pull-right right hide-score-0 hidden " data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="false" aria-controls="collapse0"><div><img src="http://s6.postimg.org/4kipvrikd/hidedetails_blue.png" width="30"></div><a class="h3" role="button">HIDE DETAILS</a></span> 
       </div> 
       <!-- End Panel Heading --> 
       <div id="collapse0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-0"> 
        <div class="panel-body" id="course-summary-panel-body-0"> 
         <!-- Append Score Details Here --> 
         <div class="row"> 
          <div class="col-xs-7 col-sm-4 col-md-4 left"><span class="course-name">Chapter 1</span> 
          </div> 
          <div class="col-xs-3 col-sm-6 col-md-6 mid"><span class="date">08/24/2015</span> 
          </div> 
          <div class="col-xs-2 col-sm-2 col-md-2 pull-right right"> 
           <div class="score">0%</div> 
           <div class="h5">SCORE</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row" style="padding: 0px 60px;"> 
     <div class="panel-group " id="accordion" role="tablist" aria-multiselectable="true"> 
      <div class="panel course-summary "> 
       <div class="panel-heading panel-1" role="tab" id="heading-1"><span class="pull-left left"><div class="panel-title h1">Course Summary</div><div class="panel-title h2" id="course-name">Geometry: Common Core</div></span><span class="pull-right right show-score-1 " data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"><div><img src="http://s6.postimg.org/ramwlv83h/report_blue.png" width="30"></div><a class="h3" role="button">VIEW REPORT</a></span><span class="pull-right right hide-score-1 hidden " data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"><div><img src="http://s6.postimg.org/4kipvrikd/hidedetails_blue.png" width="30"></div><a class="h3" role="button">HIDE DETAILS</a></span> 
       </div> 
       <!-- End Panel Heading --> 
       <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1"> 
        <div class="panel-body" id="course-summary-panel-body-1"> 
         <!-- Append Score Details Here --> 
         <div class="row"> 
          <div class="col-xs-7 col-sm-4 col-md-4 left"><span class="course-name">Chapter 1</span> 
          </div> 
          <div class="col-xs-3 col-sm-6 col-md-6 mid"><span class="date">08/24/2015</span> 
          </div> 
          <div class="col-xs-2 col-sm-2 col-md-2 pull-right right"> 
           <div class="score">0%</div> 
           <div class="h5">SCORE</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

---

JS

$(function() { 

    for (i = 0; i < 2; i++) { 

     var $courseSummaryHeading = $('.course-summary .panel-heading.panel-' + i); 
     var $showBtn = $('.show-score-' + i); 
     var $hideBtn = $('.hide-score-' + i); 

     $('#collapse' + i).on('show.bs.collapse', function() { 
      $hideBtn.removeClass('hidden'); 
      $showBtn.addClass('hidden'); 
      $courseSummaryHeading.css({ 
       'border-bottom': '8px solid #273645' 
      }); 
     }); 

     $('#collapse' + i).on('hide.bs.collapse', function() { 
      $showBtn.removeClass('hidden'); 
      $hideBtn.addClass('hidden'); 
      $courseSummaryHeading.css({ 
       'border-bottom': '1px solid #273645' 
      }); 
     }); 
    } 





}); 

---

Fiddle

Answer 1

收起开幕前的所有div：

$('#collapse' + i).on('show.bs.collapse', function() { 
     $('[id^=collapse]').trigger('hide.bs.collapse'); //<<<<<---- 
     $hideBtn.removeClass('hidden'); 
     $showBtn.addClass('hidden'); 
     $courseSummaryHeading.css({ 
      'border-bottom': '8px solid #273645' 
     }); 
    }); 

DEMO

Answer 2

你要隐藏所有的DIV这些类是#collapse" + number"。

好了，下面你的榜样，你只需要隐藏，当它被折叠

$('#collapse' + i).on('show.bs.collapse', function() { 
    $('#collapse').hide(); // Added here 
    $hideBtn.removeClass('hidden'); 
    $showBtn.addClass('hidden'); 
    $courseSummaryHeading.css({ 
     'border-bottom': '8px solid #273645' 
    }); 
}); 

请参阅jsfiddle更新