How To Create a Responsive FAQ Section In HTML, CSS & JAVASCRIPT

How To Create a Responsive FAQ Section In HTML, CSS & JAVASCRIPT

Share It With Your Firends:

An FAQ page In HTML canΒ help users navigate your site.

Not only does an FAQ with links to related content provide your user with a deeper experience of your website, it also boosts your internal link-building, which is an important search ranking factor.

Why is FAQ important for a website?

FAQsΒ enable you to deal with specific queries that your customers have about your business. They also represent another way to reach out and connect with your target audience. Therefore, it is one of the most important elements of your website strategy.

HTML

<body>

    <div class="section">
        <h1>FAQ Section</h1>
        <div class="container-1">

            <div class="faq">
                <div class="question">
                    <h2>What is Machine Learning?</h2>
                    <i class="fa fa-arrow-circle-o-right"></i>
                </div>
                <div class="answer">
                    <p>Machine Learning is a advanced python course. After done intermidiadte python you can learn about machine learning.</p>
                </div>
            </div>

            <div class="faq">
                <div class="question">
                    <h2>What is Flexbox In CSS?</h2>
                    <i class="fa fa-arrow-circle-o-right"></i>
                </div>
                <div class="answer">
                    <p>Machine Learning is a advanced python course. After done intermidiadte python you can learn about machine learning.</p>
                </div>
            </div>

            <div class="faq">
                <div class="question">
                    <h2>How To Learn HTML & CSS?</h2>
                    <i class="fa fa-arrow-circle-o-right"></i>
                </div>
                <div class="answer">
                    <p>Machine Learning is a advanced python course. After done intermidiadte python you can learn about machine learning.</p>
                </div>
            </div>

        </div>

        <div class="container-2">

            <div class="faq">
                <div class="question">
                    <h2>How To Learn coding?</h2>
                    <i class="fa fa-arrow-circle-o-right"></i>
                </div>
                <div class="answer">
                    <p>Machine Learning is a advanced python course. After done intermidiadte python you can learn about machine learning.</p>
                </div>
            </div>

            <div class="faq">
                <div class="question">
                    <h2>What is Front-end development In HTML</h2>
                    <i class="fa fa-arrow-circle-o-right"></i>
                </div>
                <div class="answer">
                    <p>Machine Learning is a advanced python course. After done intermidiadte python you can learn about machine learning.</p>
                </div>
            </div>

            <div class="faq">
                <div class="question">
                    <h2>What is Back-end Development In HTML?</h2>
                    <i class="fa fa-arrow-circle-o-right"></i>
                </div>
                <div class="answer">
                    <p>Machine Learning is a advanced python course. After done intermidiadte python you can learn about machine learning.</p>
                </div>
            </div>

        </div>

    </div>

</body>

CSS

<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
    body{
        font-family: 'Poppins', sans-serif;
        background-color: #eee;
    }

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .section{
        display: inline-block;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        margin: 0 auto;
    }

    .section h1{
        margin-top: 40px;
        font-size: 40px;
        text-align: center;
        margin-bottom: 40px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: rgb(27, 150, 232);
    }

    .container-1{
        display: block;
        float: left;
        width: 50%;
        padding: 20px 40px;
    }

    .container-2{
        display: block;
        float: right;
        width: 50%;
        padding: 20px 40px;
    }

    .faq{
        max-width: 100%;
        margin-bottom: 50px;
        padding: 25px 30px;
        background-color: #fff;
        box-shadow: 5px 5px 5px 5px #aaa;
        border-radius: 10px;
    }

    .question{
        display: flex;
        justify-content: space-between;
        align-items: center;
        letter-spacing: 2px;
    }

    .question h2{
        font-size: 22px;
        color: rgb(27, 150, 232);
    }

    .question i{
        font-size: 24px;
        color: rgb(27, 150, 232);
        cursor: pointer;
    }

    .answer{
        max-height: 0;
        overflow: hidden;
        transition: max-height 1s;
    }

    .answer p{
        padding-top: 20px;
        font-size: 15px;
        letter-spacing: 2px;
    }

    .faq.active .answer{
        max-height: 250px;
    }

    @media screen and (max-width: 850px){

        .section{
            display: table;
        }

        .container-1{
            width: 100%;
            padding: 0 20px;
        }

        .container-2{
            width: 100%;
            padding: 0 20px; 
        }

        .question h2{
            font-size: 17px;
        }

        .answer p{
            font-size: 14px;
        }
        
    }

</style>

JAVASCRIPT:

<script>
    const question = document.querySelectorAll('.faq');

    question.forEach(faq => {
        faq.addEventListener("click", () => {
            faq.classList.toggle("active");
        })
    })
</script>

Share It With Your Friends

1 Comment

Leave a Reply

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python
DIY AI Voice Assistant In Python

September 8, 2023

Build your own AI assistant with Python! Learn to recognize voice commands, generate responses, and more. Create your virtual companion…

share it

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python

Additional Content

CodeWithAM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus.

Products

Automated Chatbot

Data Security

Virtual Reality

Communication

Support

Services

FAQ's

Privacy Policy

Terms & Condition

Team

Contact Us

Company

About Us

Services

Features

Our Pricing

Latest News

Β© 2023 Codewitham