Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 30, 2021 06:33 pm GMT

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

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:






Original Link: https://dev.to/thatanjan/how-to-build-a-beautiful-faq-accordion-menu-with-html-css-and-javascript-2p68

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To