单击手风琴时将打开图标更改为关闭图标(活动打开)

Question

到目前为止，我已经有了这个代码手风琴。我已经在"；手风琴类"；。

.accordion::after {
content: " ";
background: url("../image/icons/w-open.svg");   <!-- icon when not open-->
right: 0;
display: block;
background-repeat: no-repeat;
height: 28px;
width: 28px;
margin: 10px auto;
}
.accordion[aria-expanded="true"] {
background: url("../image/icons/w-close.svg");   <!-- icon when open-->
}

<div class="col-md-6 col-sm-12 col-xs-12">                          
<a class="accordion defaultcolor">
Accordion Title
</a>  
<div class="panel">
<p>Accordion Text Content</p>
</div>
</div>

折叠的手风琴工作正常，除了手风琴折叠(打开(时更改的图标。

我怎样才能顺利地处理不断变化的图标？

更新：我使用这个js可以进行活动(显示(手风琴：

var accordions = document.querySelectorAll("a.accordion");
for (var i = 0; i < accordions.length; i++) {
accordions[i].onclick = function() {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
hideAll(this);
};
}
function hideAll(exceptThis) {
for (var i = 0; i < accordions.length; i++) {
if (accordions[i] !== exceptThis) {
accordions[i].classList.remove("active");
accordions[i].nextElementSibling.classList.remove("show");
}
}
}

这个js代码运行得非常好。但是图标仍然不会改变。

有人能帮我解决这个问题吗？

Answer 1

为此，您可以使用html"细节"；以及"；摘要"；标签。这些功能就像手风琴，并提供一个图标以及

<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>