FAQs

  $faqs = [

        [

            'question' => 'Add your question here?',

            'answer' => 'Write the answer here'

        ],

        [

            'question' => 'This is sample question',

            'answer' => 'This is sample answer'

        ],

    ];

    ?>

    <style>

        .faq-section {

            width: 100%;

            max-width: 1380px;

            margin: 0 auto;

        }

        .faq-item {

            border-bottom: 1px solid #ddd;

            margin-bottom: 10px;

        }

        .faq-question {

            cursor: pointer;

            padding: 15px;

            background: #f7f7f7;

            font-weight: bold;

            position: relative;

            transition: background-color 0.3s;

        }

        .faq-question:hover {

            background-color: #494444;

			color: white;

        }

        .faq-question::after {

            content: '\002B'; /* Down arrow */

            position: absolute;

            right: 20px;

            transition: transform 0.3s;

        }

        .faq-question.expanded::after {

            transform: rotate(180deg); /* Up arrow */

        }

        .faq-answer {

            display: none;

            padding: 15px;

            background: #fff;

        }

    </style>

    <div class="faq-section">

        <?php foreach ($faqs as $faq): ?>

            <div class="faq-item">

                <div class="faq-question"><?php echo esc_html($faq['question']); ?></div>

                <div class="faq-answer"><?php echo wp_kses_post($faq['answer']); ?></div>

            </div>

        <?php endforeach; ?>

    </div>

    <script>

        document.addEventListener('DOMContentLoaded', function() {

            var faqItems = document.querySelectorAll('.faq-item');

            faqItems.forEach(function(item) {

                var question = item.querySelector('.faq-question');

                question.addEventListener('click', function() {

                    var answer = item.querySelector('.faq-answer');

                    if (answer.style.display === 'none' || answer.style.display === '') {

                        answer.style.display = 'block';

                        question.classList.add('expanded');

                    } else {

                        answer.style.display = 'none';

                        question.classList.remove('expanded');

                    }

                });

            });

        });

    </script>