class-responsive-accordion.php — Responsive Tabs For Elementor trunk

responsive-tabs-for-elementor / widgets / class-responsive-accordion.php

responsive-tabs-for-elementor / widgets Last commit date

class-responsive-accordion.php

911 lines

1	<?php
2	/**
3	* Responsive_Accordion class.
4	*
5	* @category Class
6	* @package ResponsiveTabsForElementor
7	* @subpackage WordPress
8	* @author UAPP GROUP
9	* @copyright 2026 UAPP GROUP
10	* @license https://opensource.org/licenses/GPL-3.0 GPL-3.0-only
11	* @link
12	* @since 11.0.1
13	* php version 7.4.1
14	*/
15
16	namespace ResponsiveTabsForElementor\Widgets;
17
18	use ResponsiveTabsForElementor\Responsive_Tabs_Assets;
19	use Elementor\Group_Control_Background;
20	use Elementor\Group_Control_Typography;
21	use Elementor\Icons_Manager;
22	use Elementor\Repeater;
23	use Elementor\Utils;
24	use Elementor\Widget_Base;
25	use Elementor\Controls_Manager;
26
27	// Security Note: Blocks direct access to the plugin PHP files.
28	defined('ABSPATH') \|\| die();
29
30	/**
31	* ResponsiveAccordion widget class.
32	*
33	* @since 11.0.1
34	*/
35	class Responsive_Accordion extends Widget_Base
36	{
37	/**
38	* ResponsiveAccordion constructor.
39	*
40	* @param array $data
41	* @param null $args
42	*
43	* @throws \Exception
44	*/
45	public function __construct($data = [], $args = null)
46	{
47	parent::__construct($data, $args);
48	wp_register_style('responsive-tabs', plugins_url('/assets/css/responsive-tabs.min.css', RESPONSIVE_TABS_FOR_ELEMENTOR), [], RESPONSIVE_TABS_VERSION);
49
50	Responsive_Tabs_Assets::register_tabs_handler();
51	}
52
53	/**
54	* Retrieve the widget name.
55	*
56	* @return string Widget name.
57	* @since 11.0.1
58	*
59	* @access public
60	*
61	*/
62	public function get_name()
63	{
64	return 'responsive-accordion';
65	}
66
67	/**
68	* Retrieve the widget title.
69	*
70	* @return string Widget title.
71	* @since 11.0.1
72	*
73	* @access public
74	*
75	*/
76	public function get_title()
77	{
78	return __('Responsive Accordion', 'responsive-tabs-for-elementor');
79	}
80
81	/**
82	* Retrieve the widget icon.
83	*
84	* @return string Widget icon.
85	* @since 11.0.1
86	*
87	* @access public
88	*
89	*/
90	public function get_icon()
91	{
92	return 'icon-icon-tabs-left-accordion';
93	}
94
95	/**
96	* Retrieve the list of categories the widget belongs to.
97	*
98	* Used to determine where to display the widget in the editor.
99	*
100	* Note that currently Elementor supports only one category.
101	* When multiple categories passed, Elementor uses the first one.
102	*
103	* @return array Widget categories.
104	* @since 11.0.1
105	*
106	* @access public
107	*
108	*/
109	public function get_categories()
110	{
111	return ['responsive_accordions'];
112	}
113
114	/**
115	* Enqueue styles.
116	*/
117	public function get_style_depends()
118	{
119	$styles = ['responsive-tabs'];
120
121	return $styles;
122	}
123
124	public function get_script_depends()
125	{
126	$scripts = ['responsive-tabs'];
127
128	return $scripts;
129	}
130
131	/**
132	* Get default tab.
133	*
134	* @return array Default tab.
135	* @since 11.0.1
136	*
137	* @access protected
138	*
139	*/
140	protected function get_default_tab()
141	{
142	return [
143	'tab_name' => __('Title', 'responsive-tabs-for-elementor'),
144	'tab_content' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
145	];
146	}
147
148	/**
149	* Register the widget controls.
150	*
151	* Adds different input fields to allow the user to change and customize the widget settings.
152	*
153	* @since 11.0.1
154	*
155	* @access protected
156	*/
157	protected function register_controls()
158	{
159	// Content Section
160	$this->start_controls_section(
161	'section_content',
162	[
163	'label' => __('Content', 'responsive-tabs-for-elementor'),
164	]
165	);
166	$repeater = new Repeater();
167	$repeater->add_control(
168	'tab_name',
169	[
170	'label' => __('Tab Name', 'responsive-tabs-for-elementor'),
171	'type' => Controls_Manager::TEXT,
172	'default' => __('Title', 'responsive-tabs-for-elementor'),
173	'label_block' => true,
174	'frontend_available' => true,
175	'dynamic' => [
176	'active' => true,
177	],
178	]
179	);
180
181	$sub_tabs_number = range(0, 10);
182	$sub_tabs_number = array_combine($sub_tabs_number, $sub_tabs_number);
183
184	$repeater->add_responsive_control(
185	'sub_tabs_to_show',
186	[
187	'label' => esc_html__('Sub Tabs To Show', 'responsive-tabs-for-elementor'),
188	'type' => Controls_Manager::SELECT,
189	'default' => '0',
190	'options' => $sub_tabs_number,
191	]
192	);
193	$repeater->add_control(
194	'tab_content',
195	[
196	'label' => __('Tab Content', 'responsive-tabs-for-elementor'),
197	'type' => Controls_Manager::WYSIWYG,
198	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
199	'rows' => 20,
200	'dynamic' => [
201	'active' => true,
202	],
203	'condition' => [
204	'sub_tabs_to_show' => '0',
205	],
206	]
207	);
208	$repeater->add_control(
209	'sub_tab_name_1',
210	[
211	'label' => __('<span class="editor-sub-tab-title">First Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
212	'type' => Controls_Manager::TEXT,
213	'default' => __('Title', 'responsive-tabs-for-elementor'),
214	'label_block' => true,
215	'dynamic' => [
216	'active' => true,
217	],
218	'condition' => [
219	'sub_tabs_to_show' => ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
220	],
221	]
222	);
223	$repeater->add_control(
224	'sub_tab_content_1',
225	[
226	'label' => __('Content', 'responsive-tabs-for-elementor'),
227	'type' => Controls_Manager::WYSIWYG,
228	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
229	'dynamic' => [
230	'active' => true,
231	],
232	'condition' => [
233	'sub_tabs_to_show' => ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
234	],
235	]
236	);
237	$repeater->add_control(
238	'sub_tab_name_2',
239	[
240	'label' => __('<span class="editor-sub-tab-title">Second Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
241	'type' => Controls_Manager::TEXT,
242	'default' => __('Title', 'responsive-tabs-for-elementor'),
243	'label_block' => true,
244	'dynamic' => [
245	'active' => true,
246	],
247	'condition' => [
248	'sub_tabs_to_show' => ['2', '3', '4', '5', '6', '7', '8', '9', '10'],
249	],
250	]
251	);
252	$repeater->add_control(
253	'sub_tab_content_2',
254	[
255	'label' => __('Content', 'responsive-tabs-for-elementor'),
256	'type' => Controls_Manager::WYSIWYG,
257	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
258	'dynamic' => [
259	'active' => true,
260	],
261	'condition' => [
262	'sub_tabs_to_show' => ['2', '3', '4', '5', '6', '7', '8', '9', '10'],
263	],
264	]
265	);
266	$repeater->add_control(
267	'sub_tab_name_3',
268	[
269	'label' => __('<span class="editor-sub-tab-title">Third Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
270	'type' => Controls_Manager::TEXT,
271	'default' => __('Title', 'responsive-tabs-for-elementor'),
272	'label_block' => true,
273	'dynamic' => [
274	'active' => true,
275	],
276	'condition' => [
277	'sub_tabs_to_show' => ['3', '4', '5', '6', '7', '8', '9', '10'],
278	],
279	]
280	);
281	$repeater->add_control(
282	'sub_tab_content_3',
283	[
284	'label' => __('Content', 'responsive-tabs-for-elementor'),
285	'type' => Controls_Manager::WYSIWYG,
286	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
287	'dynamic' => [
288	'active' => true,
289	],
290	'condition' => [
291	'sub_tabs_to_show' => ['3', '4', '5', '6', '7', '8', '9', '10'],
292	],
293	]
294	);
295	$repeater->add_control(
296	'sub_tab_name_4',
297	[
298	'label' => __('<span class="editor-sub-tab-title">Fourth Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
299	'type' => Controls_Manager::TEXT,
300	'default' => __('Title', 'responsive-tabs-for-elementor'),
301	'label_block' => true,
302	'dynamic' => [
303	'active' => true,
304	],
305	'condition' => [
306	'sub_tabs_to_show' => ['4', '5', '6', '7', '8', '9', '10'],
307	],
308	]
309	);
310	$repeater->add_control(
311	'sub_tab_content_4',
312	[
313	'label' => __('Content', 'responsive-tabs-for-elementor'),
314	'type' => Controls_Manager::WYSIWYG,
315	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
316	'dynamic' => [
317	'active' => true,
318	],
319	'condition' => [
320	'sub_tabs_to_show' => ['4', '5', '6', '7', '8', '9', '10'],
321	],
322	]
323	);
324	$repeater->add_control(
325	'sub_tab_name_5',
326	[
327	'label' => __('<span class="editor-sub-tab-title">Fifth Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
328	'type' => Controls_Manager::TEXT,
329	'default' => __('Title', 'responsive-tabs-for-elementor'),
330	'label_block' => true,
331	'dynamic' => [
332	'active' => true,
333	],
334	'condition' => [
335	'sub_tabs_to_show' => ['5', '6', '7', '8', '9', '10'],
336	],
337	]
338	);
339	$repeater->add_control(
340	'sub_tab_content_5',
341	[
342	'label' => __('Content', 'responsive-tabs-for-elementor'),
343	'type' => Controls_Manager::WYSIWYG,
344	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
345	'dynamic' => [
346	'active' => true,
347	],
348	'condition' => [
349	'sub_tabs_to_show' => ['5', '6', '7', '8', '9', '10'],
350	],
351	]
352	);
353	$repeater->add_control(
354	'sub_tab_name_6',
355	[
356	'label' => __('<span class="editor-sub-tab-title">Sixth Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
357	'type' => Controls_Manager::TEXT,
358	'default' => __('Title', 'responsive-tabs-for-elementor'),
359	'label_block' => true,
360	'dynamic' => [
361	'active' => true,
362	],
363	'condition' => [
364	'sub_tabs_to_show' => ['6', '7', '8', '9', '10'],
365	],
366	]
367	);
368	$repeater->add_control(
369	'sub_tab_content_6',
370	[
371	'label' => __('Content', 'responsive-tabs-for-elementor'),
372	'type' => Controls_Manager::WYSIWYG,
373	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
374	'dynamic' => [
375	'active' => true,
376	],
377	'condition' => [
378	'sub_tabs_to_show' => ['6', '7', '8', '9', '10'],
379	],
380	]
381	);
382	$repeater->add_control(
383	'sub_tab_name_7',
384	[
385	'label' => __('<span class="editor-sub-tab-title">Seventh Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
386	'type' => Controls_Manager::TEXT,
387	'default' => __('Title', 'responsive-tabs-for-elementor'),
388	'label_block' => true,
389	'dynamic' => [
390	'active' => true,
391	],
392	'condition' => [
393	'sub_tabs_to_show' => ['7', '8', '9', '10'],
394	],
395	]
396	);
397	$repeater->add_control(
398	'sub_tab_content_7',
399	[
400	'label' => __('Content', 'responsive-tabs-for-elementor'),
401	'type' => Controls_Manager::WYSIWYG,
402	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
403	'dynamic' => [
404	'active' => true,
405	],
406	'condition' => [
407	'sub_tabs_to_show' => ['7', '8', '9', '10'],
408	],
409	]
410	);
411	$repeater->add_control(
412	'sub_tab_name_8',
413	[
414	'label' => __('<span class="editor-sub-tab-title">Eighth Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
415	'type' => Controls_Manager::TEXT,
416	'default' => __('Title', 'responsive-tabs-for-elementor'),
417	'label_block' => true,
418	'dynamic' => [
419	'active' => true,
420	],
421	'condition' => [
422	'sub_tabs_to_show' => ['8', '9', '10'],
423	],
424	]
425	);
426	$repeater->add_control(
427	'sub_tab_content_8',
428	[
429	'label' => __('Content', 'responsive-tabs-for-elementor'),
430	'type' => Controls_Manager::WYSIWYG,
431	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
432	'dynamic' => [
433	'active' => true,
434	],
435	'condition' => [
436	'sub_tabs_to_show' => ['8', '9', '10'],
437	],
438	]
439	);
440	$repeater->add_control(
441	'sub_tab_name_9',
442	[
443	'label' => __('<span class="editor-sub-tab-title">Ninth Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
444	'type' => Controls_Manager::TEXT,
445	'default' => __('Title', 'responsive-tabs-for-elementor'),
446	'label_block' => true,
447	'dynamic' => [
448	'active' => true,
449	],
450	'condition' => [
451	'sub_tabs_to_show' => ['9', '10'],
452	],
453	]
454	);
455	$repeater->add_control(
456	'sub_tab_content_9',
457	[
458	'label' => __('Content', 'responsive-tabs-for-elementor'),
459	'type' => Controls_Manager::WYSIWYG,
460	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
461	'dynamic' => [
462	'active' => true,
463	],
464	'condition' => [
465	'sub_tabs_to_show' => ['9', '10'],
466	],
467	]
468	);
469	$repeater->add_control(
470	'sub_tab_name_10',
471	[
472	'label' => __('<span class="editor-sub-tab-title">Tenth Sub Tab</span>Name', 'responsive-tabs-for-elementor'),
473	'type' => Controls_Manager::TEXT,
474	'default' => __('Title', 'responsive-tabs-for-elementor'),
475	'label_block' => true,
476	'dynamic' => [
477	'active' => true,
478	],
479	'condition' => [
480	'sub_tabs_to_show' => '10',
481	],
482	]
483	);
484	$repeater->add_control(
485	'sub_tab_content_10',
486	[
487	'label' => __('Content', 'responsive-tabs-for-elementor'),
488	'type' => Controls_Manager::WYSIWYG,
489	'default' => __('<h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
490	'dynamic' => [
491	'active' => true,
492	],
493	'condition' => [
494	'sub_tabs_to_show' => '10',
495	],
496	]
497	);
498	$this->add_control(
499	'tab',
500	[
501	'label' => __('Repeater Tab', 'responsive-tabs-for-elementor'),
502	'type' => Controls_Manager::REPEATER,
503	'fields' => $repeater->get_controls(),
504	'title_field' => 'Tab',
505	'default' => [$this->get_default_tab()],
506	]
507	);
508	$this->end_controls_section();
509
510	// General styles Section
511	$this->start_controls_section(
512	'general_styles_section',
513	[
514	'label' => esc_html__('General Styles', 'responsive-tabs-for-elementor'),
515	'tab' => Controls_Manager::TAB_STYLE,
516	]
517	);
518	$this->add_group_control(
519	Group_Control_Background::get_type(),
520	[
521	'name' => 'background',
522	'types' => ['classic', 'gradient'],
523	'fields_options' => [
524	'background' => [
525	'label' => 'Tabs Background',
526	],
527	],
528	'selector' => '{{WRAPPER}} .responsive-accordion-section',
529	]
530	);
531	$this->add_control(
532	'tabs_active_background',
533	[
534	'label' => 'Tabs Active Background',
535	'type' => Controls_Manager::COLOR,
536	'selectors' => [
537	'{{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab' => 'background-color: {{VALUE}};',
538	'{{WRAPPER}} .responsive-accordion-section .responsive-tabs-content-list' => 'background-color: {{VALUE}};',
539	'{{WRAPPER}} .responsive-accordion-section .responsive-tabs-content-list .responsive-tab-content.active-tab' => 'background-color: {{VALUE}};',
540	'{{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab:hover, {{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab:hover' => 'background-color: {{VALUE}};',
541	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name.active-sub-tab:hover, {{WRAPPER}} .responsive-accordion-section .sub-tab-name.active-sub-tab:hover' => 'background-color: {{VALUE}};',
542	'{{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab .accordion-wrapper-counter' => 'background-color: {{VALUE}};',
543	'{{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab .accordion-wrapper-title .accordion-item-title' => 'background-color: {{VALUE}};',
544	'{{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab .accordion-wrapper-title .accordion-items-sub-title' => 'background-color: {{VALUE}};',
545	'{{WRAPPER}} .responsive-accordion-section .responsive-sub-tab-name .sub-tab-name.active-sub-tab' => 'background-color: {{VALUE}};',
546	],
547	]
548	);
549	$this->add_control(
550	'tabs_hover_background',
551	[
552	'label' => esc_html__('Tabs hover background', 'responsive-tabs-for-elementor'),
553	'type' => Controls_Manager::COLOR,
554	'selectors' => [
555	'{{WRAPPER}} .responsive-accordion-section .responsive-tab:hover, {{WRAPPER}} .responsive-accordion-section .responsive-tab:hover' => 'background-color: {{VALUE}};',
556	],
557	]
558	);
559	$this->end_controls_section();
560
561	// Tab styles Section
562	$this->start_controls_section(
563	'tabs_styles_section',
564	[
565	'label' => esc_html__('Tabs Styles', 'responsive-tabs-for-elementor'),
566	'tab' => Controls_Manager::TAB_STYLE,
567	]
568	);
569	$this->add_control(
570	'tab_space',
571	[
572	'label' => esc_html__('Space Between Tabs', 'responsive-tabs-for-elementor'),
573	'type' => Controls_Manager::SLIDER,
574	'range' => [
575	'px' => [
576	'min' => 0,
577	'max' => 100,
578	],
579	],
580	'selectors' => [
581	'{{WRAPPER}} .responsive-accordion-section .accordion-item-title h2.responsive-tab-name a.responsive-tab-link' => 'padding-bottom: calc({{SIZE}}{{UNIT}} / 2); padding-top: calc({{SIZE}}{{UNIT}} / 2);',
582	'{{WRAPPER}} .responsive-accordion-section .accordion-wrapper-counter a.responsive-tab-link' => 'padding-bottom: calc({{SIZE}}{{UNIT}} / 2); padding-top: calc({{SIZE}}{{UNIT}} / 2);',
583	'{{WRAPPER}} .responsive-accordion-section a.responsive-tab-link' => 'padding-bottom: calc({{SIZE}}{{UNIT}} / 2); padding-top: calc({{SIZE}}{{UNIT}} / 2);',
584	'{{WRAPPER}} .responsive-accordion-section .responsive-tab-content.active-tab' => 'padding-top: calc({{SIZE}}{{UNIT}} / 2.5);',
585	],
586	]
587	);
588	$this->add_control(
589	'tab_name_color',
590	[
591	'label' => esc_html__('Tab Name Color', 'responsive-tabs-for-elementor'),
592	'type' => Controls_Manager::COLOR,
593	'selectors' => [
594	'{{WRAPPER}} .responsive-accordion-section .responsive-tab-info h2>a>span' => 'color: {{VALUE}}',
595	'{{WRAPPER}} .responsive-accordion-section .responsive-tab span' => 'color: {{VALUE}}',
596	],
597	]
598	);
599	$this->add_group_control(
600	Group_Control_Typography::get_type(),
601	[
602	'name' => 'tab_name_typography',
603	'label' => esc_html__('Tab Name Typography', 'responsive-tabs-for-elementor'),
604	'selector' => '{{WRAPPER}} .responsive-accordion-section .responsive-tab-info h2>a>span',
605	]
606	);
607	$this->add_control(
608	'arrow_size',
609	[
610	'label' => esc_html__('Arrow size', 'responsive-tabs-for-elementor'),
611	'type' => Controls_Manager::SLIDER,
612	'range' => [
613	'px' => [
614	'min' => 12,
615	'max' => 60,
616	],
617	],
618	'selectors' => [
619	'{{WRAPPER}} .accordion-arrow .icon-arrow, {{WRAPPER}} .accordion-arrow span.icon-arrow i' => 'font-size: {{SIZE}}{{UNIT}};',
620	'{{WRAPPER}} .accordion-arrow .icon-arrow svg, {{WRAPPER}} .accordion-arrow span.icon-arrow svg' => 'width: {{SIZE}}{{UNIT}};',
621	],
622	]
623	);
624	$this->add_control(
625	'active_tab_name_color',
626	[
627	'label' => esc_html__('Active Tab Name Color', 'responsive-tabs-for-elementor'),
628	'type' => Controls_Manager::COLOR,
629	'selectors' => [
630	'{{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab h2>a>span' => 'color: {{VALUE}}',
631	'{{WRAPPER}} .responsive-accordion-section .responsive-tab:hover a span' => 'color: {{VALUE}}',
632	'{{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab span' => 'color: {{VALUE}}',
633	'{{WRAPPER}} .responsive-accordion-section .responsive-tab:hover span.icon-arrow' => 'color: {{VALUE}}',
634	],
635	]
636	);
637	$this->add_group_control(
638	Group_Control_Typography::get_type(),
639	[
640	'name' => 'active_tab_name_typography',
641	'label' => esc_html__('Active Tab Name Typography', 'responsive-tabs-for-elementor'),
642	'selector' => '{{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab h2>a>span',
643	]
644	);
645	$this->add_group_control(
646	Group_Control_Typography::get_type(),
647	[
648	'name' => 'tab_counter_typography',
649	'label' => esc_html__('Tab Counter Typography', 'responsive-tabs-for-elementor'),
650	'selector' => '{{WRAPPER}} .responsive-accordion-section .responsive-tab-link-counter span',
651	]
652	);
653	$this->add_group_control(
654	Group_Control_Typography::get_type(),
655	[
656	'name' => 'active_tab_counter_typography',
657	'label' => esc_html__('Active Tab Counter Typography', 'responsive-tabs-for-elementor'),
658	'selector' => '{{WRAPPER}} .responsive-accordion-section .responsive-tab.active-tab .responsive-tab-link-counter span',
659	]
660	);
661	$this->end_controls_section();
662
663	// Sub Tab styles Section
664	$this->start_controls_section(
665	'sub_tabs_styles_section',
666	[
667	'label' => esc_html__('Sub Tabs Styles ', 'responsive-tabs-for-elementor'),
668	'tab' => Controls_Manager::TAB_STYLE,
669	]
670	);
671	$this->add_control(
672	'active_sub_tab_border_width',
673	[
674	'label' => esc_html__('Active Sub Tab Border Width', 'responsive-tabs-for-elementor'),
675	'type' => Controls_Manager::SLIDER,
676	'range' => [
677	'px' => [
678	'min' => 0,
679	'max' => 10,
680	],
681	],
682	'selectors' => [
683	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name.active-sub-tab:before' => 'border-width: {{SIZE}}{{UNIT}};',
684	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name:before' => 'border-width: {{SIZE}}{{UNIT}};',
685	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name:hover' => 'border-width: {{SIZE}}{{UNIT}};',
686	],
687	]
688	);
689	$this->add_control(
690	'active_sub_tab_border_color',
691	[
692	'label' => esc_html__('Active Sub Tab Border Color', 'responsive-tabs-for-elementor'),
693	'type' => Controls_Manager::COLOR,
694	'selectors' => [
695	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name.active-sub-tab:before' => 'border-color: {{VALUE}};',
696	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name:hover:before' => 'border-color: {{VALUE}};',
697	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name' => 'border-color: {{VALUE}}',
698	],
699	]
700	);
701	$this->add_control(
702	'sub_tab_name_color',
703	[
704	'label' => esc_html__('Sub Tab Name Color', 'responsive-tabs-for-elementor'),
705	'type' => Controls_Manager::COLOR,
706	'selectors' => [
707	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name h3 a' => 'color: {{VALUE}}',
708	],
709	]
710	);
711	$this->add_group_control(
712	Group_Control_Typography::get_type(),
713	[
714	'name' => 'sub_tab_name_typography',
715	'label' => esc_html__('Sub Tab Name Typography', 'responsive-tabs-for-elementor'),
716	'selector' => '{{WRAPPER}} .responsive-accordion-section .sub-tab-name h3 a',
717	]
718	);
719	$this->add_control(
720	'active_sub_tab_name_color',
721	[
722	'label' => esc_html__('Active Sub Tab Name Color', 'responsive-tabs-for-elementor'),
723	'type' => Controls_Manager::COLOR,
724	'selectors' => [
725	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name.active-sub-tab h3 a' => 'color: {{VALUE}}',
726	'{{WRAPPER}} .responsive-accordion-section .sub-tab-name:hover h3 a' => 'color: {{VALUE}}',
727	],
728	]
729	);
730	$this->add_group_control(
731	Group_Control_Typography::get_type(),
732	[
733	'name' => 'active_sub_tab_name_typography',
734	'label' => esc_html__('Active Sub Tab Name Typography', 'responsive-tabs-for-elementor'),
735	'selector' => '{{WRAPPER}} .responsive-accordion-section .sub-tab-name.active-sub-tab h3 a',
736	]
737	);
738	$this->end_controls_section();
739
740	// Content Styles Section
741	$this->start_controls_section(
742	'content_styles_section',
743	[
744	'label' => esc_html__('Content Styles', 'responsive-tabs-for-elementor'),
745	'tab' => Controls_Manager::TAB_STYLE,
746	]
747	);
748	$this->add_group_control(
749	Group_Control_Typography::get_type(),
750	[
751	'name' => 'content_title_typography',
752	'label' => esc_html__('Title Typography', 'responsive-tabs-for-elementor'),
753	'selector' => '{{WRAPPER}} .responsive-accordion-section .responsive-tab-content h3, {{WRAPPER}} .responsive-accordion-section .responsive-sub-tab-content h3, {{WRAPPER}} .responsive-accordion-section .responsive-tab .tab-content-mobile h3, {{WRAPPER}} .responsive-accordion-section .sub-tab-name .sub-tab-content-mobile h3',
754	]
755	);
756	$this->add_control(
757	'content_color',
758	[
759	'label' => esc_html__('Content Color', 'responsive-tabs-for-elementor'),
760	'type' => Controls_Manager::COLOR,
761	'selectors' => [
762	'{{WRAPPER}} .responsive-accordion-section .responsive-tab-content p, {{WRAPPER}} .responsive-accordion-section .responsive-sub-tab-content p, {{WRAPPER}} .responsive-accordion-section .responsive-tab .tab-content-mobile p, {{WRAPPER}} .responsive-accordion-section .sub-tab-name .sub-tab-content-mobile p' => 'color: {{VALUE}}',
763	'{{WRAPPER}} .responsive-accordion-section .responsive-tab-content h3, {{WRAPPER}} .responsive-accordion-section .responsive-sub-tab-content h3, {{WRAPPER}} .responsive-accordion-section .responsive-tab .tab-content-mobile h3, {{WRAPPER}} .responsive-accordion-section .sub-tab-name .sub-tab-content-mobile h3' => 'color: {{VALUE}}',
764	],
765	]
766	);
767	$this->add_group_control(
768	Group_Control_Typography::get_type(),
769	[
770	'name' => 'content_typography',
771	'label' => esc_html__('Content Typography', 'responsive-tabs-for-elementor'),
772	'selector' => '{{WRAPPER}} .responsive-accordion-section .responsive-tab-content p, {{WRAPPER}} .responsive-accordion-section .responsive-sub-tab-content p, {{WRAPPER}} .responsive-accordion-section .responsive-tab .tab-content-mobile p, {{WRAPPER}} .responsive-accordion-section .sub-tab-name .sub-tab-content-mobile p',
773	]
774	);
775	$this->end_controls_section();
776
777	// Arrow Style
778	$this->start_controls_section(
779	'style_arrow',
780	[
781	'label' => __('Arrow', 'responsive-tabs-for-elementor'),
782	]
783	);
784	$this->add_control(
785	'icon_arrow',
786	[
787	'label' => __('Choose Arrow Icon', 'responsive-tabs-for-elementor'),
788	'type' => Controls_Manager::ICONS,
789	'default' => [
790	'value' => 'fas fa-chevron-down',
791	'library' => 'fa-solid',
792	],
793	'recommended' => [
794	'fa-solid' => [
795	'arrow-down',
796	'caret-down',
797	'angle-down',
798	],
799	],
800	]
801	);
802	$this->end_controls_section();
803	}
804
805	/**
806	* Render the widget output on the frontend.
807	*
808	* Written in PHP and used to generate the final HTML.
809	*
810	* @since 11.0.1
811	*
812	* @access protected
813	*/
814	protected function render()
815	{
816	$settings = $this->get_settings_for_display();
817
818
819	if ($settings['tab']) { ?>
820
821	<section class="responsive-tabs-section responsive-accordion-section">
822	<div class="responsive-tabs-block">
823	<ul class="responsive-tabs-list">
824	<?php $counter = 1;
825	foreach ($settings['tab'] as $item) { ?>
826	<li class="responsive-tab <?php if ($counter === 1) { ?>active-tab <?php } ?> tab-desktop">
827	<div class="responsive-tab-info <?php if ($item['sub_tabs_to_show']) {
828	echo 'subtitle-item';
829	} ?>">
830	<div class="accordion-wrapper-counter">
831	<a class="responsive-tab-link responsive-tab-link-counter"
832	href=<?php echo esc_url("#responsive-tab-$counter") ?>>
833	<span>
834	<?php if ($counter < 10)
835	echo '0';
836	echo wp_kses($counter, []); ?>
837	</span>
838	</a>
839	</div>
840	<div class="accordion-wrapper-title">
841	<div class="accordion-item-title">
842	<h2 class="responsive-tab-name">
843	<a class="responsive-tab-link" href=<?php echo esc_url("#responsive-tab-$counter") ?>>
844	<span><?php echo wp_kses($item['tab_name'], []); ?></span>
845	<div class="accordion-arrow"><span
846	class="icon-arrow"><?php Icons_Manager::render_icon($settings['icon_arrow']); ?></span>
847	</div>
848	</a>
849	</h2>
850	</div>
851
852	<div class="accordion-items-sub-title">
853	<?php if ($item['sub_tabs_to_show'] > '0') { ?>
854	<ul class="responsive-sub-tab-name">
855	<?php for ($i = 1; $i <= (int)$item['sub_tabs_to_show']; $i++) { ?>
856	<li class="sub-tab-name <?php if ($i === 1) { ?>active-sub-tab <?php } ?>">
857	<h3 class="sub-tab-title">
858	<a href=<?php echo esc_url("#responsive-sub-tab-$counter-$i") ?>><?php echo wp_kses($item["sub_tab_name_" . $i], []); ?></a>
859	</h3>
860	<div class="accordion-item-body">
861	<div
862	class="sub-tab-content-mobile"><?php echo wp_kses_post($item["sub_tab_content_" . $i]); ?></div>
863	</div>
864	</li>
865	<?php } ?>
866	</ul>
867	<?php } else { ?>
868	<?php if ($item['tab_content']) { ?>
869	<div
870	id=<?php echo esc_attr("#responsive-tab-$counter") ?> class="tab-content-mobile"><?php echo wp_kses_post($item['tab_content']); ?></div>
871	<?php } ?>
872	<?php } ?>
873	</div>
874	</div>
875	</div>
876	</li>
877	<?php $counter++;
878	} ?>
879	</ul>
880	</div>
881	<ul class="responsive-tabs-content-list">
882	<?php $counter = 1;
883	foreach ($settings['tab'] as $item) { ?>
884	<li id=<?php echo esc_attr("responsive-tab-$counter") ?> class="responsive-tab-content <?php if (
885	$counter === 1
886	) { ?>active-tab <?php } ?>">
887	<?php if ($item['sub_tabs_to_show'] > '0') { ?>
888	<ul class="responsive-sub-tab-content">
889	<?php for ($i = 1; $i <= (int)$item['sub_tabs_to_show']; $i++) { ?>
890	<li id=<?php echo esc_attr("responsive-sub-tab-$counter-$i") ?> class="sub-tab-content <?php if (
891	$i === 1
892	) { ?>active-sub-tab <?php } ?>">
893	<?php echo wp_kses_post($item["sub_tab_content_" . $i]); ?>
894	</li>
895	<?php } ?>
896	</ul>
897	<?php } else { ?>
898	<?php if ($item['tab_content']) { ?>
899	<div
900	id=<?php echo esc_attr("#responsive-tab-$counter") ?>><?php echo wp_kses_post($item['tab_content']); ?></div>
901	<?php } ?>
902	<?php } ?>
903	</li>
904	<?php $counter++;
905	} ?>
906	</ul>
907	</section>
908	<?php } ?>
909	<?php }
910	}
911