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 c…


This content originally appeared on DEV Community and was authored by Anjan Shomooder

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

Homepage

More screenshots

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.

Contacts

Blogs you might want to read:

Videos might you might want to watch:






This content originally appeared on DEV Community and was authored by Anjan Shomooder


Print Share Comment Cite Upload Translate Updates
APA

Anjan Shomooder | Sciencx (2021-12-30T18:33:05+00:00) How to Build a beautiful FAQ Accordion menu with Html, CSS and JavaScript. Retrieved from https://www.scien.cx/2021/12/30/how-to-build-a-beautiful-faq-accordion-menu-with-html-css-and-javascript/

MLA
" » How to Build a beautiful FAQ Accordion menu with Html, CSS and JavaScript." Anjan Shomooder | Sciencx - Thursday December 30, 2021, https://www.scien.cx/2021/12/30/how-to-build-a-beautiful-faq-accordion-menu-with-html-css-and-javascript/
HARVARD
Anjan Shomooder | Sciencx Thursday December 30, 2021 » How to Build a beautiful FAQ Accordion menu with Html, CSS and JavaScript., viewed ,<https://www.scien.cx/2021/12/30/how-to-build-a-beautiful-faq-accordion-menu-with-html-css-and-javascript/>
VANCOUVER
Anjan Shomooder | Sciencx - » How to Build a beautiful FAQ Accordion menu with Html, CSS and JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/30/how-to-build-a-beautiful-faq-accordion-menu-with-html-css-and-javascript/
CHICAGO
" » How to Build a beautiful FAQ Accordion menu with Html, CSS and JavaScript." Anjan Shomooder | Sciencx - Accessed . https://www.scien.cx/2021/12/30/how-to-build-a-beautiful-faq-accordion-menu-with-html-css-and-javascript/
IEEE
" » How to Build a beautiful FAQ Accordion menu with Html, CSS and JavaScript." Anjan Shomooder | Sciencx [Online]. Available: https://www.scien.cx/2021/12/30/how-to-build-a-beautiful-faq-accordion-menu-with-html-css-and-javascript/. [Accessed: ]
rf:citation
» How to Build a beautiful FAQ Accordion menu with Html, CSS and JavaScript | Anjan Shomooder | Sciencx | https://www.scien.cx/2021/12/30/how-to-build-a-beautiful-faq-accordion-menu-with-html-css-and-javascript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts