Wie macht man Panel-Group-Kollaps, wenn das andere geöffnet wird?

Question

Wie Sie in der Geige sehen können, können beide Panel-Gruppen gleichzeitig geöffnet werden. Wie kann ich den anderen zum Einsturz bringen, wenn ich auf einen klicke?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="container container-table"> 
 

 
\t <div class="row"> 
 
\t <div id="menucontainer" class="text-center col-lg-2 col-lg-offset-5"> 
 
\t 
 
    <div class="panel-group" id="neubau"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <button id="accordion1" data-toggle="collapse" data-parent="#neubau" href="#collapseOne" class="btn btn-default">Neubau</button> 
 
       </h4> 
 
       </div> 
 
       <div id="collapseOne" class="panel-collapse collapse"> 
 
       <ul class="list-group"> 
 
        <li class="list-group-item"><button id="neuzupf" type="button" class="btn btn-default one">Zupfinstrumente</button> 
 
\t \t \t \t \t </li> 
 
        <ul class="list-group"> 
 
         <li class="list-group-item"><button id="neustreich" type="button" class="btn btn-default">Streichinstrumente</button></li></ul> 
 

 
         
 
       </ul> 
 
       </div> 
 
      </div> 
 
       </div> 
 
       
 
       
 
    <div class="panel-group" id="restaur"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <button id="accordion2" data-toggle="collapse" data-parent="#restaur" href="#collapseTwo" class="btn btn-default">Restaurierung</button> 
 
       </h4> 
 
       </div> 
 
       <div id="collapseTwo" class="panel-collapse collapse"> 
 
       <ul class="list-group"> 
 
        <li class="list-group-item"><button id="restaurzupf" type="button" class="btn btn-default one">Zupfinstrumente</button> 
 
\t \t \t \t \t </li> 
 
        <ul class="list-group"> 
 
         <li class="list-group-item"><button id="restaurstreich" type="button" class="btn btn-default">Streichinstrumente</button></li></ul> 
 

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

Es scheint, dass es etwas mit den Daten-Eltern zu tun, aber ich kann es einfach nicht herausfinden. Lösung in JQuery wäre auch in Ordnung. Vielen Dank!

Answer 1

Machen Sie Daten-Eltern für beide gleich, so dass es als ein Geschwisterpanel funktioniert und arbeiten, wie Sie wollen.