File Content: poolax-faq.php <?php use \Elementor\Widget_Base; use \Elementor\Controls_Manager; use \Elementor\Group_Control_Typography; use \Elementor\Group_Control_Border; use \Elementor\Utils; use \Elementor\Repeater; use \Elementor\Group_Control_Box_Shadow; /** * * Faq Widget . * */ class poolax_Faq extends Widget_Base { public function get_name() { return 'poolaxfaq'; } public function get_title() { return __( 'Faq', 'poolax' ); } public function get_icon() { return 'th-icon'; } public function get_categories() { return [ 'poolax' ]; } protected function register_controls() { $this->start_controls_section( 'faq_section', [ 'label' => __( 'Faq', 'poolax' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'layout_style', [ 'label' => __( 'Layout Style', 'poolax' ), 'type' => Controls_Manager::SELECT, 'default' => '1', 'options' => [ '1' => __( 'Style One', 'poolax' ), '2' => __( 'Style Two', 'poolax' ), '3' => __( 'Style Three', 'poolax' ), '4' => __( 'Style Four', 'poolax' ), ], ] ); poolax_general_fields($this, 'subtitle', 'Subtitle', 'TEXT', 'Subtitle', ['1'] ); poolax_general_fields($this, 'title', 'Title', 'TEXTAREA', 'Title Here', ['1'] ); poolax_general_fields($this, 'faq_id', 'Faq ID', 'TEXT', '1' ); poolax_media_fields($this, 'image', 'Choose Image', ['1'] ); $repeater = new Repeater(); poolax_general_fields($repeater, 'faq_question', 'Faq Question', 'TEXTAREA', 'What Services Do You Offer?'); poolax_general_fields($repeater, 'faq_answer', 'Faq Answer', 'WYSIWYG', 'We specialize in providing top-notch pool service and maintenance'); $this->add_control( 'faq_repeater', [ 'label' => __( 'Faq Lists', 'poolax' ), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'faq_question' => __( 'What Services Do You Offer?', 'poolax' ), ], ], ] ); $this->end_controls_section(); //--------------------------------------- //Style Section Start //--------------------------------------- //-------Subtitle Style------- poolax_common_style_fields($this, 'subtitle', 'Subtitle', '{{WRAPPER}} .sub-title', ['1'],'--theme-color'); //-------Title Style------- poolax_common_style_fields($this, 'title', 'Title', '{{WRAPPER}} .sec-title', ['1']); //-------Question Style------- poolax_common_style_fields($this, 'question', 'Question', '{{WRAPPER}} .accordion-button'); //-------Answer Style------- poolax_common_style_fields($this, 'answer', 'Answer', '{{WRAPPER}} p'); } protected function render() { $settings = $this->get_settings_for_display(); if( $settings['layout_style'] == '2' ){ echo '<div class="accordion-area accordion" id="faqAccordion'.esc_attr($settings['faq_id']).'">'; $x = 0; foreach( $settings['faq_repeater'] as $single_data ){ $unique_id = uniqid(); $x++; if( $x == '1' ){ $ariaexpanded = 'true'; $class = 'show'; $collesed = ''; $is_active = 'active'; }else{ $ariaexpanded = 'false'; $class = ''; $collesed = 'collapsed'; $is_active = ''; } echo '<div class="accordion-card '.esc_attr($is_active).'">'; echo '<div class="accordion-header" id="collapse-item-'.esc_attr( $unique_id ).'">'; echo '<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-'.esc_attr( $unique_id ).'" aria-expanded="'.esc_attr( $ariaexpanded ).'" aria-controls="collapse-'.esc_attr( $unique_id ).'">'.wp_kses_post($single_data['faq_question']).'</button>'; echo '</div>'; echo '<div id="collapse-'.esc_attr( $unique_id ).'" class="accordion-collapse collapse '.esc_attr( $class ).'" aria-labelledby="collapse-item-'.esc_attr( $unique_id ).'" data-bs-parent="#faqAccordion'.esc_attr($settings['faq_id']).'">'; echo '<div class="accordion-body">'; echo wp_kses_post($single_data['faq_answer']); echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; }elseif( $settings['layout_style'] == '3' ){ echo '<div class="accordion-area accordion ms-xl-3" id="faqAccordion'.esc_attr($settings['faq_id']).'">'; $x = 0; foreach( $settings['faq_repeater'] as $single_data ){ $unique_id = uniqid(); $x++; if( $x == '1' ){ $ariaexpanded = 'true'; $class = 'show'; $collesed = ''; $is_active = 'active'; }else{ $ariaexpanded = 'false'; $class = ''; $collesed = 'collapsed'; $is_active = ''; } echo '<div class="accordion-card style3 '.esc_attr($is_active).'">'; echo '<div class="accordion-header" id="collapse-item-'.esc_attr( $unique_id ).'">'; echo '<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-'.esc_attr( $unique_id ).'" aria-expanded="'.esc_attr( $ariaexpanded ).'" aria-controls="collapse-'.esc_attr( $unique_id ).'">'.wp_kses_post($single_data['faq_question']).'</button>'; echo '</div>'; echo '<div id="collapse-'.esc_attr( $unique_id ).'" class="accordion-collapse collapse '.esc_attr( $class ).'" aria-labelledby="collapse-item-'.esc_attr( $unique_id ).'" data-bs-parent="#faqAccordion'.esc_attr($settings['faq_id']).'">'; echo '<div class="accordion-body">'; echo wp_kses_post($single_data['faq_answer']); echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; }elseif( $settings['layout_style'] == '4' ){ echo '<div class="accordion-area style6 accordion" id="faqAccordion'.esc_attr($settings['faq_id']).'">'; $x = 0; foreach( $settings['faq_repeater'] as $single_data ){ $unique_id = uniqid(); $x++; if( $x == '1' ){ $ariaexpanded = 'true'; $class = 'show'; $collesed = ''; $is_active = 'active'; }else{ $ariaexpanded = 'false'; $class = ''; $collesed = 'collapsed'; $is_active = ''; } echo '<div class="accordion-card style3 '.esc_attr($is_active).'">'; echo '<div class="accordion-header" id="collapse-item-'.esc_attr( $unique_id ).'">'; echo '<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-'.esc_attr( $unique_id ).'" aria-expanded="'.esc_attr( $ariaexpanded ).'" aria-controls="collapse-'.esc_attr( $unique_id ).'">'.wp_kses_post($single_data['faq_question']).'</button>'; echo '</div>'; echo '<div id="collapse-'.esc_attr( $unique_id ).'" class="accordion-collapse collapse '.esc_attr( $class ).'" aria-labelledby="collapse-item-'.esc_attr( $unique_id ).'" data-bs-parent="#faqAccordion'.esc_attr($settings['faq_id']).'">'; echo '<div class="accordion-body">'; echo wp_kses_post($single_data['faq_answer']); echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; }else{ echo '<div class="row">'; echo '<div class="col-xl-6 wow fadeInLeft">'; echo '<div class="ps-xl-4">'; echo '<div class="title-area mb-40 text-center text-lg-start">'; if(!empty($settings['subtitle'])){ echo '<span class="sub-title style1">'.wp_kses_post($settings['subtitle']).'</span>'; } if(!empty($settings['title'])){ echo '<h2 class="sec-title">'.wp_kses_post($settings['title']).'</h2>'; } echo '</div>'; echo '<div class="accordion-area accordion" id="faqAccordion'.esc_attr($settings['faq_id']).'">'; $x = 0; foreach( $settings['faq_repeater'] as $single_data ){ $unique_id = uniqid(); $x++; if( $x == '1' ){ $ariaexpanded = 'true'; $class = 'show'; $collesed = ''; $is_active = 'active'; }else{ $ariaexpanded = 'false'; $class = ''; $collesed = 'collapsed'; $is_active = ''; } echo '<div class="accordion-card '.esc_attr($is_active).'">'; echo '<div class="accordion-header" id="collapse-item-'.esc_attr( $unique_id ).'">'; echo '<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-'.esc_attr( $unique_id ).'" aria-expanded="'.esc_attr( $ariaexpanded ).'" aria-controls="collapse-'.esc_attr( $unique_id ).'">'.wp_kses_post($single_data['faq_question']).'</button>'; echo '</div>'; echo '<div id="collapse-'.esc_attr( $unique_id ).'" class="accordion-collapse collapse '.esc_attr( $class ).'" aria-labelledby="collapse-item-'.esc_attr( $unique_id ).'" data-bs-parent="#faqAccordion'.esc_attr($settings['faq_id']).'">'; echo '<div class="accordion-body">'; echo wp_kses_post($single_data['faq_answer']); echo '</div>'; echo '</div>'; echo '</div>'; } echo '</div>'; echo '</div>'; echo '</div>'; if(!empty( $settings['image']['url'])){ echo '<div class="col-xl-6 wow fadeInRight">'; echo '<div class="faq-image movingX">'; echo poolax_img_tag( array( 'url' => esc_url( $settings['image']['url'] ), )); echo '</div>'; echo '</div>'; } echo '</div>'; } } } Submit