Как исправить кнопку «гармошка» с помощью HTML, CSS и Javascript ⇐ CSS

[Anonymous]

Я создаю страницу часто задаваемых вопросов, но кнопка «Гармошка», похоже, не работает. На этой странице часто задаваемых вопросов у меня есть 5 разделов «Часто задаваемые вопросы», каждый из которых содержит кнопку аккордеона и элемент «панель». Теперь, когда я нажимаю кнопку аккордеона, должен отображаться элемент панели, но он не работает

Код: Выделить всё

HTML CODE


Have any questions?


What is the process of ordering furniture on urban oasis?
[i][/i]



To order furniture from our ecommerce store, simply browse our product
collection, select the desired items, and add them to your cart. Proceed
to checkout, where you'll enter your shipping and payment information to confirm your order




How do i know a furniture item will fit in my home?
[i][/i]



To check if a furniture item will fit, measure your space and compare
it with the product's dimensions. Ensure there's enough clearance for
movement, and use room planning tools for a visual fit. Need help? Contact our customer service team!




Do you offer assembly services for furniture items?
[i][/i]



Yes, we do offer assembly services for many of our furniture items. You can
select this option during checkout, or contact our customer service team for
more details and availability.




Can I customise the color or material of a furniture item?
[i][/i]



Yes, you can customize the color and material of many furniture items!
Simply use the “Customize” option in the navbar and click the “Customize Order”
button  to explore your choices and create a piece that perfectly matches your style.




What if my furniture item arrives damaged or defective?
[i][/i]



If your furniture arrives damaged or defective, please contact our customer service team
immediately.  We'll guide you through the return or replacement process and ensure the issue
is resolved quickly.





CSS
#FAQs {
background: var(--bg);
}

#FAQs .FAQs-container {
max-width: 75%;
margin: auto;
}

#FAQs .FAQs-container h1 {
margin: 1.5rem 0;
text-align: center;
letter-spacing: 3px;
}

#FAQs .FAQs-container .FAQs .accordion {
background-color: var(--white);
color: rgba(0, 0, 0, 0.8);
cursor: pointer;
font-size: 1.2rem;
width: 100%;
padding: 2rem 2.5rem;
outline: none;
border: none;
transition: 0.4s;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}

#FAQs .FAQs-container .FAQs .accordion i {
font-size: 1.6rem;
}

#FAQs .FAQs-container .FAQs .accordion .active,
#FAQs .FAQs-container .FAQs .accordion:hover {
background-color: #f1f7f5;
}

#FAQs .FAQs-container .FAQs .panel {
padding: 0 2rem 2.5rem 2rem;
background-color: var(--white);
overflow: hidden;
background-color: #f1f7f5;
display: none;
}

#FAQs .FAQs-container .FAQs {
border: 1px solid rgba(0, 0, 0, 0.2);
margin: 10px 0px;
}

#FAQs .FAQs-container .FAQs .active {
border: none;
}

#FAQs .FAQs-container .FAQs .panel p{
color: rgba(0, 0, 0, 0.7);
font-size: 1.2rem;
line-height: 1.4;
}

JAVASCRIPT

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

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
this.parentElement.classList.toggle("active");

var panel = this.nextElementSibling;

if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
[FAQs page accordion not working](https://i.sstatic.net/YpCcLXx7.png)

Я пытался создать кнопку-гармошка, при нажатии на которую отображается абзац, но она не работает.

Подробнее здесь: https://stackoverflow.com/questions/788 ... javascript