How To Display FAQ Group Accordion ACF Field Event CPT Single Layout Elementor Free

This guide is related to this How To Edit Event CPT Single Layout Elementor Free and How To Show ACF Field Event CPT Single Layout Elementor Free

1. You need to add this code to your website which will add the Acf accordion module to Elementor on your website. In the video is use the WpCodeBox snippet plugin to put it in my website. But there is also free plugins which also can work or you can put it inside your child themes function file.

<?php 
add_action('elementor/widgets/widgets_registered', function () {

    class Linnet_ACF_FAQ_Accordion_Widget extends \Elementor\Widget_Base {

        public function get_name() {
            return 'linnet_acf_faq_accordion';
        }

        public function get_title() {
            return __('Linnet ACF FAQ Accordion', 'linnet');
        }

        public function get_icon() {
            return 'eicon-editor-list';
        }

        public function get_categories() {
            return ['general'];
        }

        protected function _register_controls() {
            $this->start_controls_section(
                'section_content',
                [
                    'label' => __('Settings', 'linnet'),
                ]
            );

            $this->add_control(
                'acf_group_name',
                [
                    'label' => __('ACF Group Name', 'linnet'),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => 'faq',
                ]
            );

            $this->add_control(
                'acf_question_base',
                [
                    'label' => __('Question Field Base Name', 'linnet'),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => 'faq_question',
                ]
            );

            $this->add_control(
                'acf_answer_base',
                [
                    'label' => __('Answer Field Base Name', 'linnet'),
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'default' => 'faq_answer',
                ]
            );

            $this->end_controls_section();
        }

        protected function render() {
            $settings = $this->get_settings_for_display();

            $group_name = $settings['acf_group_name'];
            $q_base     = $settings['acf_question_base'];
            $a_base     = $settings['acf_answer_base'];

            // ✅ Ensure we use the real post being viewed (not the Elementor template)
            $post_id = get_queried_object_id();

            $faq_group = get_field($group_name, $post_id);

            if (empty($faq_group) || !is_array($faq_group)) {
                echo '<p>No FAQ data found.</p>';
                return;
            }

            $output = '<div class="linnet-accordion-widget">';
            $i = 1;

            while (true) {
                $q_key = $q_base . '_' . $i;
                $a_key = $a_base . '_' . $i;

                $question = $faq_group[$q_key] ?? '';
                $answer = $faq_group[$a_key] ?? '';

                if (empty($question) && empty($answer)) {
                    break;
                }

                $output .= '
                <div class="linnet-accordion-item">
                    <button class="linnet-accordion-header" aria-expanded="false">
                        <span class="linnet-accordion-title">' . esc_html($question) . '</span>
                        <span class="linnet-accordion-icon">▼</span>
                    </button>
                    <div class="linnet-accordion-content" hidden>
                        ' . wp_kses_post($answer) . '
                    </div>
                </div>';

                $i++;
            }

            $output .= '</div>';

            echo $output;

            // Inject styles and JS (once)
            $this->print_inline_script_and_styles();
        }

        private function print_inline_script_and_styles() {
            static $printed = false;
            if ($printed) return;
            $printed = true;

            ?>
            <style>
                .linnet-accordion-widget {
                    border: 1px solid #e5e7eb;
                    border-radius: 6px;
                    overflow: hidden;
                }

                .linnet-accordion-item {
                    border-top: 1px solid #e5e7eb;
                }

                .linnet-accordion-item:first-child {
                    border-top: none;
                }

                .linnet-accordion-header {
                    background: #fff;
                    padding: 16px 20px;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-weight: 600;
                    font-size: 16px;
                    border: none;
                    cursor: pointer;
                    transition: background 0.2s ease;
                }



                .linnet-accordion-icon {
                    transition: transform 0.2s ease;
                }

                .linnet-accordion-header[aria-expanded="true"] .linnet-accordion-icon {
                    transform: rotate(180deg);
                }

                .linnet-accordion-content {
                    padding: 16px 20px;
                    font-size: 15px;
                    background: #fff;
                    line-height: 1.6;
                }
            </style>

            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    document.querySelectorAll(".linnet-accordion-header").forEach(function (btn) {
                        btn.addEventListener("click", function () {
                            const expanded = this.getAttribute("aria-expanded") === "true";
                            this.setAttribute("aria-expanded", !expanded);
                            const content = this.nextElementSibling;
                            if (expanded) {
                                content.setAttribute("hidden", true);
                            } else {
                                content.removeAttribute("hidden");
                            }
                        });
                    });
                });
            </script>
            <?php
        }
    }

    \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Linnet_ACF_FAQ_Accordion_Widget);
});

2. Then Go to linnet templates -> edit your event single page template.
3. Find the linnet acf faq accordion widget/module, and add it to the page.
4. Then you need to enter your group name, question field base name and answer base name.
   This means that inside your group you can call your fields
   faq_question_1
   faq_answer_1
   faq_question_2
   faq_answer_2
   etc.
5. Click publish.