How to fix my accordion button using HTML, CSS and Javascript

nnenna
July 28, 2024
119 views
0 votes
2 Answers

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.

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.

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 {
    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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js" defer></script>
</head>
<body>
    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>    
</body>
</html>

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQs</title>
    <style>
        /* Add your CSS styles here */
    </style>
</head>
<body>
    <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?</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>
            <!-- Add the rest of your FAQs here -->
        </div>
    </section>

    <script>
        const accordions = document.querySelectorAll('.accordion');

        accordions.forEach(accordion => {
            accordion.addEventListener('click', function() {
                this.classList.toggle('active');
                const panel = this.nextElementSibling;
                if (panel.style.display === 'block') {
                    panel.style.display = 'none';
                } else {
                    panel.style.display = 'block';
                }
            });
        });
    </script>
</body>
</html>

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 the active 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.

Please signup or login to give your own answer.

Click here to cancel reply.