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

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>

1 Comment

Leave a Reply

For News Subscribe Us!

Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure.

You have been successfully Subscribed! Ops! Something went wrong, please try again.

© 2022 Code With AM