FAQ Accordion

  $faqs = [

        [

            'question' => 'What is your return policy?',

            'answer' => 'Our return policy lasts 30 days. If 30 days have gone by since your purchase, unfortunately, we can’t offer you a refund or exchange.'

        ],

        [

            'question' => 'How do I track my order?',

            'answer' => 'You will receive an email with a tracking number once your order has been shipped. You can use this number to track your order on our website.'

        ],

        [

            'question' => 'Can I change my shipping address?',

            'answer' => 'Yes, you can change your shipping address before the order is shipped. Please contact our support team to update your address.'

        ]

    ];

    ?>

    <style>

        .faq-section {

            width: 100%;

            max-width: 800px;

            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: #e2e2e2;

        }

        .faq-question::after {

            content: '25BC'; /* 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>