Javascript JS：在引导折叠时更改div中的图标？

好的，我已经尝试了几种方法（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>

还有其他几种变体，但都不起作用。然后我尝试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是否折叠来更改图标？

只需切换类：

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

---

只需切换类：

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

---

删除

toggleClass（）内类名前的点

删除

toggleClass（）内类名前的点