使用css javascript和jquery进行正负折叠

我只希望使用css javascript/jquery来解决这个问题，我希望这些手风琴在展开时得到fa减号，在折叠时得到fa加号

我希望类在展开时更改为fa负数，在折叠时更改为fa加数

CSS

p、 手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
i、 手风琴{
背景色：#ddd；
}
保险商实验室{
填充：0 18px；
显示：无；
背景色：白色；
}

HTML

手风琴

服务

商店

JS

var acc=document.getElementsByClassName（“accordion”）；
var i；
var plus=document.getElementsByClassName（“fa plus”）；
对于（i=0；ii.hide（）；
$（''）.addClass（'fa-'）；
var ul=this.nextElementSibling；
如果（ul.style.display==“块”）{
ul.style.display=“无”；
//$（“”）。显示（）；
}否则{
ul.style.display=“块”；
}
}
}

更改

$（''）.addClass（'fa-minus'）到
$（this）.find（'i'）.toggleClass（'fa-minus'）


var acc=document.getElementsByClassName（“accordion”）；
var i；
var plus=document.getElementsByClassName（“fa plus”）；
对于（i=0；ii.hide（）；
$（this.find（'i'）.toggleClass（'fa-minus'）；
var ul=this.nextElementSibling；
如果（ul.style.display==“块”）{
ul.style.display=“无”；
//$（“”）。显示（）；
}否则{
ul.style.display=“块”；
}
}
}
手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
i、 手风琴{
背景色：#ddd；
}
保险商实验室{
填充：0 18px；
显示：无；
背景色：白色；
}

手风琴
服务










商店









您的markupim中没有
。折叠切换
，不使用bootstrap bootstrap与什么有关系？您的JS使用
.collapse toggle
作为单击处理程序，但您的代码中没有该元素，因此代码无法运行。抱歉，现在更新了它
<style>
p.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

i.accordion , p.accordion {
    background-color: #ddd; 
}
ul {
    padding: 0 18px;
    display: none;
    background-color: white;
}
</style>
</head>

<h2>Accordion</h2>

          <p class="accordion">Service <i style="padding-right:100px;" class="accordion fa fa-plus" aria-hidden="true"></i></p>
          <ul class="panel footer-links">
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Order Status</a></li>
            <li><a href="#">faq</a></li>
            <li><a href="#">shipping policy</a></li>
            <li><a href="#">return policy</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Live Chat</a></li>
          </ul>

   <p class="accordion">shop <i class="accordion fa fa-plus" aria-hidden="true"></i></p>
          <ul class="panel footer-links">
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Order Status</a></li>
            <li><a href="#">faq</a></li>
            <li><a href="#">shipping policy</a></li>
            <li><a href="#">return policy</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Live Chat</a></li>
          </ul>

<script>
var acc = document.getElementsByClassName("accordion");
var i;
var plus = document.getElementsByClassName("fa-plus");

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){

        this.classList.toggle("active");
        console.log(this);
        $(this>i).hide();
        $('<i>').addClass('fa-minus');

        var ul = this.nextElementSibling;

        if (ul.style.display === "block") {
            ul.style.display = "none";
            //    $("").show();
        } else {
            ul.style.display = "block";



        }
    }
}
</script>