JS：ブートストラップの折りたたみ時にdivのアイコンを変更しますか？

Question

私はいくつかの方法（JSとCSS）を試しましたが、これを動作させることはできません。 divを折りたたむときに、プラスフォントの素晴らしいアイコンをマイナスに変更する必要があります（つまり、divの代わりに新しいdivを追加するかdivのクラスを変更する）。

私は同様の質問を見ましたが、私の人生のためにこれを解決することはできません。

は、ここに私のhtmlです：

<div class="panel-heading" role="tab" id="headingOne"> 

           <h4 class="panel-title"> 

           <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i><span style="margin-left: 12px; display: inline-block;"></span>Lab Focus: Cloud Management with vRealize Operations & <nobr>vRealize Automation</nobr></a> 

           </h4> 

          </div> 


          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 

            <div class="panel-body"> 

             <span style="font-family:'proximanova-light', sans-serif;font-size:15px; line-height:19px; text-align:left; color: #565656;"> 

             <p>Deliver intelligent operations management across physical, virtual, and cloud infrastructures and accelerate the deployment and management of applications and compute services, improving business agility and operational efficiency.</p> 

私はdiv要素をクリックすると、それは（それがアコーディオンのdiv要素である）私はdiv要素が崩れたときに戻って再びfa-plus-square-ofa-minus-square-oにを変更する必要が開きます。私はこれらの8を持っているので、私はJSを使用してthis試してみました：

 $(".collapsed").click(function() { 
        console.log("panel clicked"); 
        var downPanel = ""; 
    $(this).html(downPanel); 
        $('.fa-plus-square-o', this).remove(); 
$('.fa-plus-minus-o', this).add(); 
          }); 

および他のいくつかのバリエーションが、何も働きました。私はその後、CSSをクラスをcollapsed1に変更しようとしました：

.collapsed1 .fa-minus-square-o, 
.collapsed1.collapsed .fa-minus-square-o { 
    display: inline-block; 
} 
.collapsed1.collapsed .fa-plus-square-o, 
.collapsed1 .fa-plus-square-o { 
    display: none; 
} 

しかし、この結果マイナスまたは両方のアイコンが常に表示されます。私はJSには新しく、助けが必要です。

divが折りたたまれているかどうかによって、アイコンを変更するにはどうすればよいですか？

Answer 1

だけのクラスを切り替える：

$('.collapsed').on('click', function() { 
$(this).find('i') 
    .toggleClass('fa-minus-square-o') 
    .toggleClass('fa-plus-square-o') 
});