How to Build a beautiful FAQ Accordion menu with Html, CSS and JavaScript

In this blog, you will learn how to build this beautiful Faq accordion menu for your website.

Requirements:

Html
CSS
JavaScript

Html

<h1 class="title">Cules Coding Faq</h1>

<div class="container">
    <div class="faq__section">
        <div class="question__header">
            <h3 class="question__title">lorem ipsum dolor sit amet</h3>

            <div class="close__section">
                <img src="./media/expand-button.png" alt="" />
            </div>
        </div>

        <div class="answer__section">
            <p>
                Consectetur rerum quidem vitae deleniti facere vitae reprehenderit
                doloremque, deleniti quo fugit? Id magni cupiditate maiores iure quam?
                Quisquam reprehenderit laboriosam veritatis soluta quibusdam! Quas eos ipsa
                soluta eaque earum corporis. Asperiores ipsa rerum labore voluptatibus vero
                Tempore id accusantium assumenda itaque aliquam praesentium Sapiente ipsum
                quos distinctio laboriosam consectetur Dignissimos aut magnam nam eius
                reprehenderit? Id eligendi magni nihil
            </p>
            <p>
                Consectetur rerum quidem vitae deleniti facere vitae reprehenderit
                doloremque, deleniti quo fugit? Id magni cupiditate maiores iure quam?
                Quisquam reprehenderit laboriosam veritatis soluta quibusdam! Quas eos ipsa
                soluta eaque earum corporis. Asperiores ipsa rerum labore voluptatibus vero
                Tempore id accusantium assumenda itaque aliquam praesentium Sapiente ipsum
                quos distinctio laboriosam consectetur Dignissimos aut magnam nam eius
                reprehenderit? Id eligendi magni nihil
            </p>
        </div>
    </div>

    <div class="faq__section">
        <div class="question__header">
            <h3 class="question__title">
                ipsum dolor sit ametlorem ipsum dolor lorem ipsum
            </h3>

            <div class="close__section">
                <img src="./media/expand-button.png" alt="" />
            </div>
        </div>

        <div class="answer__section">
            <p>
                Consectetur rerum quidem vitae deleniti facere vitae reprehenderit
                doloremque, deleniti quo fugit? Id magni cupiditate maiores iure quam?
                Quisquam reprehenderit laboriosam veritatis soluta quibusdam! Quas eos ipsa
                soluta eaque earum corporis. Asperiores ipsa rerum labore voluptatibus vero
                Tempore id accusantium assumenda itaque aliquam praesentium Sapiente ipsum
                quos distinctio laboriosam consectetur Dignissimos aut magnam nam eius
                reprehenderit? Id eligendi magni nihil
            </p>
        </div>
    </div>

    <div class="faq__section">
        <div class="question__header">
            <h3 class="question__title">lorem ipsum dolor sit amet</h3>

            <div class="close__section">
                <img src="./media/expand-button.png" alt="" />
            </div>
        </div>

        <div class="answer__section">
            <p>
                Consectetur rerum quidem vitae deleniti facere vitae reprehenderit
                doloremque, deleniti quo fugit? Id magni cupiditate maiores iure quam?
                Quisquam reprehenderit laboriosam veritatis soluta quibusdam! Quas eos ipsa
                soluta eaque earum corporis. Asperiores ipsa rerum labore voluptatibus vero
                Tempore id accusantium assumenda itaque aliquam praesentium Sapiente ipsum
                quos distinctio laboriosam consectetur Dignissimos aut magnam nam eius
                reprehenderit? Id eligendi magni nihil
            </p>
        </div>
    </div>

    <div class="faq__section">
        <div class="question__header">
            <h3 class="question__title">lorem ipsum dolor sit amet</h3>

            <div class="close__section">
                <img src="./media/expand-button.png" alt="" />
            </div>
        </div>

        <div class="answer__section">
            <p>
                Consectetur rerum quidem vitae deleniti facere vitae reprehenderit
                doloremque, deleniti quo fugit? Id magni cupiditate maiores iure quam?
                Quisquam reprehenderit laboriosam veritatis soluta quibusdam! Quas eos ipsa
                soluta eaque earum corporis. Asperiores ipsa rerum labore voluptatibus vero
                Tempore id accusantium assumenda itaque aliquam praesentium Sapiente ipsum
                quos distinctio laboriosam consectetur Dignissimos aut magnam nam eius
                reprehenderit? Id eligendi magni nihil
            </p>
        </div>
    </div>

    <div class="faq__section">
        <div class="question__header">
            <h3 class="question__title">lorem ipsum dolor sit amet</h3>

            <div class="close__section">
                <img src="./media/expand-button.png" alt="" />
            </div>
        </div>

        <div class="answer__section">
            <p>
                Consectetur rerum quidem vitae deleniti facere vitae reprehenderit
                doloremque, deleniti quo fugit? Id magni cupiditate maiores iure quam?
                Quisquam reprehenderit laboriosam veritatis soluta quibusdam! Quas eos ipsa
                soluta eaque earum corporis. Asperiores ipsa rerum labore voluptatibus vero
                Tempore id accusantium assumenda itaque aliquam praesentium Sapiente ipsum
                quos distinctio laboriosam consectetur Dignissimos aut magnam nam eius
                reprehenderit? Id eligendi magni nihil
            </p>
        </div>
    </div>
</div>

Explanation:

faq__section is holding each question with its answer.
question__header is the actual part that will be displayed.
answer__section will display the answer and it will be hidden by default.

CSS

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Mohave:wght@700&family=Montserrat:wght@100;200;300;400;500;600;700&family=Nothing+You+Could+Do&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    letter-spacing: 1px;
    color: white;
}

body {
    background-color: #272727;
    font-family: 'Montserrat', sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
}

.faq__section {
    padding-bottom: 20px;
}

.title {
    text-align: center;
    font-size: 50px;
    padding: 100px 0;
}

.container {
    max-width: 700px;
    margin: auto;
}

.question__header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 1rem 2rem;
    background-color: #ff4c00;
    border-radius: 20px;
}

.question__title {
    flex-grow: 1;
    padding-right: 1rem;
    font-weight: 500;
}

.close__section {
    margin-left: 2rem;
    transform: rotate(0deg);
    transition: all 0.3s ease-in-out;
}

.close__section img {
    width: 25px;
    height: auto;
}

.faq__section.active .close__section {
    transform: rotate(180deg);
}

.answer__section {
    line-height: 1.5;
    background: #171717;
    border-radius: 20px;
    max-height: 0;
    overflow: hidden;
    padding: 0rem 2rem;
    margin: 0;
    transition: max-height 0.2s ease-out, margin 0.2s ease-out;
}

.answer__section p {
    padding: 1rem 0;
}

.faq__section.active .answer__section {
    max-height: 700px;
    margin: 20px 0;
}

Explanation:

.answer__section will be hidden by default. Its max-height will be 0;
If a section is expanded then a active class will be attached to the .faq__section.
If active class is present then answer__section will be shown by making the max-height: 700px.

const faqSections = document.querySelectorAll('.faq__section')

faqSections.forEach(faqSection => {
    faqSection.addEventListener('click', () => {
        faqSection.classList.toggle('active')
    })
})

Explanation:

We have selected all the Faq sections and looped over them.
We attached the click listener to every element and toggle the active class on every click.

And that's it. Now you have a beautiful FAQ section for your website.

Shameless Plug

I have made a video about how to re-create the SpaceX landing page with vanilla HTML, CSS and, JavaScript.

You will learn about:

Javascript intersection observer to add cool effects
DOM manipulation
Aligning elements with css positions.
How to make responsive websites.

This will be a great project to brush up your front end skills.

If you are interested you can check the video.

You can also demo the application form here

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project.

About me

Why do I do what I do?

The Internet has revolutionized our life. I want to make the internet more beautiful and useful.

What do I do?

I ended up being a full-stack software engineer.

What can I do?

I can develop complex full-stack web applications like social media applications or e-commerce sites. See more of my work from here

What have I done?

I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories.

Screenshot

I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don't miss the cool stuff.

Want to work with me?

I am looking for a team where I can show my ambition and passion and produce great value for them.
Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you.