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

A M
July 10, 2022
1 Comment

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

Introduction To Web Development & Technology - CODE WITH AM
September 17, 2022 at 3:25 pm
[…] JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. […]

Log in to Reply