JavaScript可折叠div的全部折叠/全部显示切换按钮

我的网站上有一些可折叠的div，这里有一个例子：（照片中的不是我；））使用下面的JavaScript/CSS和简化的html示例

我一直在寻找一种创建“全部折叠/全部显示”按钮的方法，但因为我真的不懂JavaScript，所以在使用我所看到的示例时遇到了问题

我已经花了相当多的时间修改当前使用的JavaScript/CSS，所以我真的不想在不同的系统中放弃它-有人能帮我创建一个按钮，当单击该按钮时，可以根据我已经使用的.inside div类在hide/show all之间切换吗

谢谢

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

。可折叠{
背景色：#007784；
颜色：#FFFFFF；
光标：指针；
宽度：97%；
边框：2倍实心#000000；
边框底部：0px；
边界半径：15px 15px 0px 0px；
文本对齐：居中；
大纲：无；
字号：18px；
字体大小：粗体；
字体系列：Verdana、Arial、Helvetica、无衬线；
利润上限：3倍；
填充：0px；
}
按钮。可折叠。活动{
边框：2倍实心#000000；
边界半径：15px；
}
.可折叠：悬停{
背景色：#0066FF；
边框底部：0px；
边界半径：15px 15px 0px 0px；
利润上限：3倍；
}
.主动{
背景色：#007784；
边框底部：0px；
边界半径：15px 15px 0px 0px；
利润上限：3倍；
}
.里面{
填充：0；
宽度：97%；
显示：块；
溢出：隐藏；
边框顶部：0px；
左边框：1px实心#000000；
右边框：1px实心#000000；
边框底部：1px实心#000000；
背景色：#FFFFFF；
边界半径：0px 0px 15px 15px；
}
/*无关的*/
.trials{宽度：100%；}

标准新手
GSDCO
BTCWWA
派克靴
2020年1月1日
2020年1月1日
2020年1月1日
跳投新手
PNWSSC
MHDPC
GSDCO
2020年3月1日
2020年3月2日
2020年3月3日

这是解决方案，现在使用纯javascript

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i0）{
元素[0]。类列表。删除（'active'）；
}
showAllBtn.classList.remove（'show'）；
colAllBtn.classList.add（'show'）；
flag=！flag；
}
});
。可折叠{
背景色：#007784；
颜色：#FFFFFF；
光标：指针；
宽度：97%；
边框：2倍实心#000000；
边框底部：0px；
边界半径：15px 15px 0px 0px；
文本对齐：居中；
大纲：无；
字号：18px；
字体大小：粗体；
字体系列：Verdana、Arial、Helvetica、无衬线；
利润上限：3倍；
填充：0px；
}
按钮。可折叠。活动{
边框：2倍实心#000000；
边界半径：15px；
}
.可折叠：悬停{
背景色：#0066FF；
边框底部：0px；
边界半径：15px 15px 0px 0px；
利润上限：3倍；
}
.主动{
背景色：#007784；
边框底部：0px；
边界半径：15px 15px 0px 0px；
利润上限：3倍；
}
.里面{
填充：0；
宽度：97%；
显示：块；
溢出：隐藏；
边框顶部：0px；
左边框：1px实心#000000；
右边框：1px实心#000000；
边框底部：1px实心#000000；
背景色：#FFFFFF；
边界半径：0px 0px 15px 15px；
}
/*无关的*/
.试验{宽度：100%；}
#colapseAll span{display:none；}
#colapsell span.show{display:block；}
折叠全部显示全部
标准新手
GSDCO
BTCWWA
派克靴
2020年1月1日
2020年1月1日
2020年1月1日
跳投者号
document.addEventListener("DOMContentLoaded", function(){
   ...
});

document.addEventListener("DOMContentLoaded", function(){
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (!content.style.display || content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
});

.style.display = "none"

.classList.toggle('hide');

.hide { display: none }