jQueryアコーディオンが動作していません

Question

私は以下のjQueryとHTMLコードを使用しています。

パネルが折りたたまれている/表示されているため、アイコンは変更されていません。 パネルの見出しをクリックすると、パネルが表示され、折りたたまれます。

私はまた、ブートストラップ​​を使用しました。

var selectIds =$('#collapse1,#collapse2,#collapse3'); 
 
     $(function ($) { 
 
     selectIds.on('show.bs.collapse hidden.bs.collapse', function() { 
 
      $(this).prev().find('.fa').toggleClass('fa-plus fa-minus'); 
 
     }) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    
 
<div class="panel-group" id="accordion"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a> 
 
       </h4> 
 
      </div> 
 
     <div id="panel1" class="panel-collapse collapse in"> 
 
      <div class="panel-body"> 
 
       Contents panel 1 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a> 
 
       </h4> 
 
      </div> 
 
      <div id="panel2" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        Contents panel 2 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a> 
 
       </h4> 
 
      </div> 
 
      <div id="panel3" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        Contents panel 3 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

あなたのIDとクラスが一致していません。

var selectIds =$('#panel1,#panel2,#panel3'); 
 
$(function ($) { 
 
    selectIds.on('show.bs.collapse hidden.bs.collapse', function() { 
 
     $(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a> 
 
      </h4> 
 
     </div> 
 
    <div id="panel1" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
      Contents panel 1 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a> 
 
      </h4> 
 
     </div> 
 
     <div id="panel2" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Contents panel 2 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title"> 
 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a> 
 
      </h4> 
 
     </div> 
 
     <div id="panel3" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       Contents panel 3 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

0123：

• 以下の作業のデモを参照してください​​

でfaを交換し#panel

で#collapseを交換してください