Javascript 将CSS手风琴应用于不同的按钮

我有以下代码：

Javascript:

var acc = document.getElementsByClassName("button");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

HTML:

克卢伊
同侧眼线

比丘里斯蒂
同侧眼线

西比乌
同侧眼线

我怎样才能使所有的按钮都像手风琴一样？我有不同的类名，因为每个按钮在悬停时都有不同的背景图像

---

此版本的代码不适用于所有按钮，仅适用于第一个按钮。要做什么？

变量acc是一个按钮数组，类名为“button”。但是在html代码中，只有一个按钮元素的类名为button，因此它适用于ButtonCluz。由于您已经为每个按钮定义了一个id，请尝试在css中使用id选择器（#button、#button1、#button2），而不是类选择器（.button、.button1、.button2），这有助于您拥有不同的背景图像。所有按钮都有一个相同的类名，并在下面的行中使用它

 var acc = document.getElementsByClassName("buttonName");

---

变量acc是类名为“button”的按钮数组。但是在html代码中，只有一个按钮元素的类名为button，因此它适用于ButtonCluz。由于您已经为每个按钮定义了一个id，请尝试在css中使用id选择器（#button、#button1、#button2），而不是类选择器（.button、.button1、.button2），这有助于您拥有不同的背景图像。所有按钮都有一个相同的类名，并在下面的行中使用它

 var acc = document.getElementsByClassName("buttonName");

 var acc = document.getElementsByClassName("buttonName");