如何为Accordion手风琴组件切换Plus/Minus加减图标

已实现点击Accordion手风琴时显示答案的功能，但希望通过JavaScript实现点击时将Plus图标切换为Minus图标，再次点击切回Plus图标的交互效果，请求技术协助。

修改后的完整代码 #

HTML（无需改动） #

<div class="faqs-container">
        <div class="faqs-question">
            <button>
                <h3>Which services do you provide?</h3>
                <i class="bi bi-plus"></i>
            </button>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. </p>
        </div>
</div>

CSS（无需改动） #

.faqs-container {
    max-width: 90%;
    margin: 0 auto;
}
.faqs-question {
    width: 100%;
    border: 2px solid #999;
    border-radius: 4px;
    margin-bottom: 25px;
}
.faqs-container:hover{
    color: #999;
}
.faqs-question button{
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    border: none;
    outline: none;
    font-size: 24px;
    font-family: 'interstate', sans-serif;
    font-weight: 500;
    color: #300600;
    cursor: pointer;
    transition: 0.6s ease-in-out;
}
.faqs-question button h3{
    font-size: 28px;
    font-family: 'interstate', sans-serif;
    font-weight: 500;
    transition: 0.2s ease-in-out;
    padding: 10px;
}
.faqs-question button h3:hover{
    color: #999;
    transition: 0.2s ease-in-out;
}
.faqs-question i{
    font-size: 48px;
    transition: 0.5s ease-in-out;
}
.faqs-question i:hover{
    color: #999;
    transition: 0.2s ease-in-out;
}
.faqs-question p {
    margin-top: 10px;
    font-size: 24px;
    font-family: 'Merriweather-Sans', sans-serif;
    font-weight: 300;
    line-height: 55px;
    color: #444;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 0.6s ease;
}
.faqs-question p.show{
    max-height: 45vh;
    opacity: 1;
    padding: 10px 0px 40px 15px;
    padding-right: 40px;
    padding-left: 20px;
    margin-bottom: 35px;
}

JavaScript（核心修改） #

const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
    button.addEventListener('click', () => {
        const faq = button.nextElementSibling;
        faq.classList.toggle('show');
        // 切换图标类名
        const icon = button.querySelector('i');
        icon.classList.toggle('bi-plus');
        icon.classList.toggle('bi-minus');
    })
})

修改说明 #

• 在按钮点击事件中，通过button.querySelector('i')定位到按钮内的图标元素
• 利用classList.toggle()方法同时切换bi-plus和bi-minus类名：当手风琴展开时，图标从加号切换为减号；收起时自动切回加号，完美匹配手风琴的状态变化

内容的提问来源于stack exchange，提问作者TheNickster