I am creating a FAQs page, and the accordion button doesn’t seem to be working. In this FAQs page, I have 5 "FAQs" div each containing the accordion button and a "panel" div. Now when i click on the accordion button, the panel div is supposed to be displayed but it is not working
HTML CODE
<section id="FAQs">
<div class="FAQs-container">
<h1>Have any questions?</h1>
<div class="FAQs">
<button class="accordion">
What is the process of ordering furniture on urban oasis?
<i class="fa-solid fa-chevron-down"></i>
</button>
<div class="panel">
<p>
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
</p>
</div>
</div>
<div class="FAQs">
<button class="accordion">
How do i know a furniture item will fit in my home?
<i class="fa-solid fa-chevron-down"></i>
</button>
<div class="panel">
<p>
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!
</p>
</div>
</div>
<div class="FAQs">
<button class="accordion">
Do you offer assembly services for furniture items?
<i class="fa-solid fa-chevron-down"></i>
</button>
<div class="panel">
<p>
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.
</p>
</div>
</div>
<div class="FAQs">
<button class="accordion">
Can I customise the color or material of a furniture item?
<i class="fa-solid fa-chevron-down"></i>
</button>
<div class="panel">
<p>
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.
</p>
</div>
</div>
<div class="FAQs">
<button class="accordion">
What if my furniture item arrives damaged or defective?
<i class="fa-solid fa-chevron-down"></i>
</button>
<div class="panel">
<p>
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.
</p>
</div>
</div>
</div>
</section>
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)
I tried creating an accorion button that displays a paragraph when it is clicked on but it does not work.
2
Answers
For the JavaScript make sure that the DOM is loaded properly so it can attach the event listeners on the elements. You can add a defer attribute on the tag like this:
<script src="js/script.js" defer></script>
That’s why it doesn’t work when you click on it. Please run my snippet below and see if this is what you are looking for.
It looks like you are trying to create an accordion-style FAQ section on your website. To make the accordion functionality work properly, you will need to use some JavaScript to handle the toggling of the content when the accordion button is clicked.
Here’s an example of how you can add a simple JavaScript code snippet to your HTML to achieve the accordion functionality:
In this script, we select all elements with the class
accordion
and attach a click event listener to each. When the accordion button is clicked, we toggle theactive
class on the button and show/hide the corresponding panel by changing its display property.You can add this JavaScript snippet within the
<script>
tag in your HTML file, just before the closing</body>
tag. Make sure to adjust the styling and functionality as per your design requirements.