<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ WITH jQuery</title>
    <!-- ! jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"
    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <script type="text/javascript" src="jQuery.min.js"></script>

    <!-- BOX ICON -->
    <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <!-- FONT AWOSOME -->
    <script src="https://kit.fontawesome.com/d98021311a.js" crossorigin="anonymous"></script>

    <!-- STYLE -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
        <div class="faq-section">
            <div class="faq-part">
                <div class="faq-header">FAQ</div>
                <div class="faq-items">
                    <!-- faq item -->
                    <div class="faq-item">
                        <div class="faq-item-title">
                           <div> FAQ SECTION TYPE YOUR QUECTION </div>
                           <div> <i class="bx bx-right-arrow faq-item-1"></i> </div> 
                        </div>
                        <div class="faq-item-details">
                            paragraph section type your text hear what you
                            dsfghokpkf   jdifj fdglkj ndfg lfdgid d gj dg 
                            fkmg  dgods dsjdogp dgjodpjsd podjgpdsj dspoj dgjd dgjodpj 
                            sddsh glgj
                        </div>
                    </div>
                    <!-- End faq item -->
                    <!-- faq item -->
                    <div class="faq-item">
                        <div class="faq-item-title">
                           <div> FAQ SECTION TYPE YOUR QUECTION </div>
                           <div> <i class="bx bx-right-arrow faq-item-1"></i> </div> 
                        </div>
                        <div class="faq-item-details">
                            paragraph section type your text hear what you
                            dsfghokpkf   jdifj fdglkj ndfg lfdgid d gj dg 
                            fkmg  dgods dsjdogp dgjodpjsd podjgpdsj dspoj dgjd dgjodpj 
                            sddsh glgj
                            <br><br>
                            paragraph section type your text hear what you
                            dsfghokpkf   jdifj fdglkj ndfg lfdgid d gj dg 
                            fkmg  dgods dsjdogp dgjodpjsd podjgpdsj dspoj dgjd dgjodpj 
                            sddsh glgj
                        </div>
                    </div>
                    <!-- end faq item -->
                    <!-- faq item -->
                    <div class="faq-item">
                        <div class="faq-item-title">
                           <div> FAQ SECTION TYPE YOUR QUECTION </div>
                           <div> <i class="bx bx-right-arrow faq-item-1"></i> </div> 
                        </div>
                        <div class="faq-item-details">
                            paragraph section type your text hear what you
                            dsfghokpkf   jdifj fdglkj ndfg lfdgid d gj dg 
                            fkmg  dgods dsjdogp dgjodpjsd podjgpdsj dspoj dgjd dgjodpj 
                            sddsh glgj
                            <br><br>
                            paragraph section type your text hear what you
                            dsfghokpkf   jdifj fdglkj ndfg lfdgid d gj dg 
                            fkmg  dgods dsjdogp dgjodpjsd podjgpdsj dspoj dgjd dgjodpj 
                            sddsh glgj
                        </div>
                    </div>
                    <!-- end faq item -->
                    <!-- faq item -->
                    <div class="faq-item">
                        <div class="faq-item-title">
                           <div> FAQ SECTION TYPE YOUR QUECTION </div>
                           <div> <i class="bx bx-right-arrow faq-item-1"></i> </div> 
                        </div>
                        <div class="faq-item-details">
                            paragraph section type your text hear what you
                            dsfghokpkf   jdifj fdglkj ndfg lfdgid d gj dg 
                            fkmg  dgods dsjdogp dgjodpjsd podjgpdsj dspoj dgjd dgjodpj 
                            sddsh glgj
                            <br><br>
                            paragraph section type your text hear what you
                            dsfghokpkf   jdifj fdglkj ndfg lfdgid d gj dg 
                            fkmg  dgods dsjdogp dgjodpjsd podjgpdsj dspoj dgjd dgjodpj 
                            sddsh glgj
                        </div>
                    </div>
                    <!-- end faq item -->
                    <!-- faq item -->
                    <div class="faq-item">
                        <div class="faq-item-title">
                           <div> FAQ SECTION TYPE YOUR QUECTION </div>
                           <div> <i class="bx bx-right-arrow faq-item-1"></i> </div> 
                        </div>
                        <div class="faq-item-details">
                            paragraph section type your text hear what you
                            dsfghokpkf   jdifj fdglkj ndfg lfdgid d gj dg 
                            fkmg  dgods dsjdogp dgjodpjsd podjgpdsj dspoj dgjd dgjodpj 
                            sddsh glgj
                            <br><br>
                            paragraph section type your text hear what you
                            dsfghokpkf   jdifj fdglkj ndfg lfdgid d gj dg 
                            fkmg  dgods dsjdogp dgjodpjsd podjgpdsj dspoj dgjd dgjodpj 
                            sddsh glgj
                        </div>
                    </div>
                    <!-- end faq item -->

                </div>
            </div>
        </div>


</body>
</html>
body{
    background-color: rgb(239, 253, 255);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.faq-section{
    /* width: 100%;
    height: 100vh; */
    padding: 100px 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.faq-part{
    width: 70%;
    height: 70%;
    background-color: rgba(0, 255, 255, 0.904);
    padding: 20px 25px;
    font-family: Arial, Helvetica, sans-serif;
    
}

.faq-header{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
}


.faq-items{
    margin-top: 30px;
    width: 100%;
    justify-content: center;
    align-items: center;
    
}

.faq-item{
    width: 100%;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
}

.faq-item-title{
    
    padding: 15px 14px;
    background-color: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.faq-item-title div:nth-child(1){
    font-size: 1rem;
    position: relative;
    width: 98%;
    font-weight: 600;
}

.faq-item-title div:nth-child(2){
    font-size: 1.4rem;
    position: relative;

}


.faq-item-details{
    display: none;
    padding: 13px 14px;
    background-color: wheat;
    font-weight: 500;
}
 $(document).ready(function(){

                var action ="click";

                $(".faq-item-title").on(action , function(){
                    $(this).next().slideToggle(300)
                    .siblings("faq-item-detail").slideUp();
                    
                });

            });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.