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

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

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

class-responsive-vertical-accordion.php

769 lines

1	<?php
2	/**
3	* Responsive_Vertical_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_Border;
21	use Elementor\Group_Control_Typography;
22	use Elementor\Icons_Manager;
23	use Elementor\Repeater;
24	use Elementor\Utils;
25	use Elementor\Widget_Base;
26	use Elementor\Controls_Manager;
27
28	// Security Note: Blocks direct access to the plugin PHP files.
29	defined('ABSPATH') \|\| die();
30
31	/**
32	* ResponsiveVerticalTabs widget class.
33	*
34	* @since 11.0.1
35	*/
36	class Responsive_Vertical_Accordion extends Widget_Base
37	{
38	/**
39	* ResponsiveVerticalTabs constructor.
40	*
41	* @param array $data
42	* @param null $args
43	*
44	* @throws \Exception
45	*/
46	public function __construct($data = [], $args = null)
47	{
48	parent::__construct($data, $args);
49	wp_register_style('responsive-vertical-accordion', plugins_url('/assets/css/responsive-vertical-accordion.min.css', RESPONSIVE_TABS_FOR_ELEMENTOR), [], RESPONSIVE_TABS_VERSION);
50
51	Responsive_Tabs_Assets::register_tabs_handler();
52	}
53
54	/**
55	* Retrieve the widget name.
56	*
57	* @return string Widget name.
58	* @since 11.0.1
59	*
60	* @access public
61	*
62	*/
63	public function get_name()
64	{
65	return 'responsive-vertical-accordion';
66	}
67
68	/**
69	* Retrieve the widget title.
70	*
71	* @return string Widget title.
72	* @since 11.0.1
73	*
74	* @access public
75	*
76	*/
77	public function get_title()
78	{
79	return __('Responsive Vertical Accordion', 'responsive-tabs-for-elementor');
80	}
81
82	/**
83	* Retrieve the widget icon.
84	*
85	* @return string Widget icon.
86	* @since 11.0.1
87	*
88	* @access public
89	*
90	*/
91	public function get_icon()
92	{
93	return 'icon-icon-tabs-vertical-accordion';
94	}
95
96	/**
97	* Retrieve the list of categories the widget belongs to.
98	*
99	* Used to determine where to display the widget in the editor.
100	*
101	* Note that currently Elementor supports only one category.
102	* When multiple categories passed, Elementor uses the first one.
103	*
104	* @return array Widget categories.
105	* @since 11.0.1
106	*
107	* @access public
108	*
109	*/
110	public function get_categories()
111	{
112	return ['responsive_accordions'];
113	}
114
115	/**
116	* Enqueue styles.
117	*/
118	public function get_style_depends()
119	{
120	$styles = ['responsive-vertical-accordion'];
121
122	return $styles;
123	}
124
125	public function get_script_depends()
126	{
127	$scripts = ['responsive-tabs'];
128
129	return $scripts;
130	}
131
132	/**
133	* Get default tab.
134	*
135	* @return array Default tab.
136	* @since 11.0.1
137	*
138	* @access protected
139	*
140	*/
141	protected function get_default_tab()
142	{
143	return [
144	'tab_image' => [
145	'url' => Utils::get_placeholder_image_src(),
146	],
147	'tab_name' => __('Title', 'responsive-tabs-for-elementor'),
148	'tab_content' => __('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
149	];
150	}
151
152	/**
153	* Register the widget controls.
154	*
155	* Adds different input fields to allow the user to change and customize the widget settings.
156	*
157	* @since 11.0.1
158	*
159	* @access protected
160	*/
161	protected function register_controls()
162	{
163	// Content Section
164	$this->start_controls_section(
165	'section_content',
166	[
167	'label' => __('Content', 'responsive-tabs-for-elementor'),
168	]
169	);
170	$repeater = new Repeater();
171	$repeater->add_control(
172	'tab_image_active',
173	[
174	'label' => __('Active Image', 'responsive-tabs-for-elementor'),
175	'type' => Controls_Manager::SWITCHER,
176	'label_on' => __('On', 'responsive-tabs-for-elementor'),
177	'label_off' => __('Off', 'responsive-tabs-for-elementor'),
178	'return_value' => 'yes',
179	'default' => 'yes',
180	]
181	);
182	$repeater->add_control(
183	'tab_image',
184	[
185	'label' => __('Choose Image', 'responsive-tabs-for-elementor'),
186	'type' => Controls_Manager::MEDIA,
187	'default' => [
188	'url' => Utils::get_placeholder_image_src(),
189	],
190	'condition' => [
191	'tab_image_active' => 'yes',
192	],
193	]
194	);
195	$repeater->add_control(
196	'tab_name',
197	[
198	'label' => __('Tab Name', 'responsive-tabs-for-elementor'),
199	'type' => Controls_Manager::TEXT,
200	'default' => __('Title', 'responsive-tabs-for-elementor'),
201	'label_block' => true,
202	'frontend_available' => true,
203	'dynamic' => [
204	'active' => true,
205	],
206	]
207	);
208
209	$repeater->add_control(
210	'tab_content',
211	[
212	'label' => __('Tab Content', 'responsive-tabs-for-elementor'),
213	'type' => Controls_Manager::WYSIWYG,
214	'default' => __('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'responsive-tabs-for-elementor</p>'),
215	'rows' => 20,
216	'dynamic' => [
217	'active' => true,
218	],
219	]
220	);
221	$this->add_control(
222	'tab',
223	[
224	'label' => __('Repeater Tab', 'responsive-tabs-for-elementor'),
225	'type' => Controls_Manager::REPEATER,
226	'fields' => $repeater->get_controls(),
227	'title_field' => 'Tab',
228	'default' => [$this->get_default_tab(), $this->get_default_tab(), $this->get_default_tab()],
229	]
230	);
231	$this->end_controls_section();
232
233	// General styles Section
234	$this->start_controls_section(
235	'general_styles_section',
236	[
237	'label' => esc_html__('General Styles', 'responsive-tabs-for-elementor'),
238	'tab' => Controls_Manager::TAB_STYLE,
239	]
240	);
241	$this->add_responsive_control(
242	'tab_margin',
243	[
244	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
245	'type' => Controls_Manager::DIMENSIONS,
246	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
247	'selectors' => [
248	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
249	],
250	]
251	);
252
253	$this->add_responsive_control(
254	'tab_padding',
255	[
256	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
257	'type' => Controls_Manager::DIMENSIONS,
258	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
259	'selectors' => [
260	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
261	],
262	]
263	);
264	$this->add_responsive_control(
265	'tab_direction',
266	[
267	'label' => esc_html__('Tabs Position', 'responsive-tabs-for-elementor'),
268	'type' => Controls_Manager::SELECT,
269	'options' => [
270	'row' => "Row",
271	'column' => "Column",
272	],
273	'default' => 'row'
274	]
275	);
276	$this->add_group_control(
277	Group_Control_Background::get_type(),
278	[
279	'name' => 'background',
280	'types' => ['classic', 'gradient'],
281	'fields_options' => [
282	'background' => [
283	'label' => 'Tabs Background',
284	],
285	],
286	'selector' => '{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper',
287	]
288	);
289	$this->add_group_control(
290	Group_Control_Background::get_type(),
291	[
292	'name' => 'active_background',
293	'types' => ['classic', 'gradient'],
294	'fields_options' => [
295	'background' => [
296	'label' => 'Active Tabs Background',
297	],
298	],
299	'selector' => '{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper.active',
300	]
301	);
302	$this->add_responsive_control(
303	'tab_height',
304	[
305	'label' => esc_html__('Height', 'responsive-tabs-for-elementor'),
306	'type' => Controls_Manager::SLIDER,
307	'size_units' => ['px', 'vh'],
308	'default' => [
309	'unit' => 'px',
310	],
311	'range' => [
312	'px' => [
313	'min' => 0,
314	'max' => 800,
315	],
316	'vh' => [
317	'min' => 0,
318	'max' => 100,
319	],
320	],
321	'selectors' => [
322	"{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper" => 'height: {{SIZE}}{{UNIT}};',
323	],
324	]
325	);
326	$this->add_responsive_control(
327	'tab_space',
328	[
329	'label' => esc_html__('Image Spacing', 'responsive-tabs-for-elementor'),
330	'type' => Controls_Manager::SLIDER,
331	'range' => [
332	'px' => [
333	'min' => 0,
334	'max' => 140,
335	],
336	],
337	'selectors' => [
338	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-image-wrapper' => 'gap: {{SIZE}}{{UNIT}}',
339	],
340	]
341	);
342	$this->end_controls_section();
343
344	// Tab styles Section
345	$this->start_controls_section(
346	'tabs_styles_section',
347	[
348	'label' => esc_html__('Tabs Styles', 'responsive-tabs-for-elementor'),
349	'tab' => Controls_Manager::TAB_STYLE,
350	]
351	);
352	$this->add_control(
353	'tab_border_width',
354	[
355	'label' => esc_html__('Tab Border Width', 'responsive-tabs-for-elementor'),
356	'type' => Controls_Manager::SLIDER,
357	'range' => [
358	'px' => [
359	'min' => 0,
360	'max' => 10,
361	],
362	],
363	'selectors' => [
364	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper' => 'border-width: {{SIZE}}{{UNIT}};',
365	],
366	]
367	);
368	$this->add_control(
369	'tab_border_color',
370	[
371	'label' => esc_html__('Tab Border Color', 'responsive-tabs-for-elementor'),
372	'type' => Controls_Manager::COLOR,
373	'selectors' => [
374	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper' => 'border-color: {{VALUE}};',
375	],
376	]
377	);
378	$this->add_control(
379	'tab_active_border_width',
380	[
381	'label' => esc_html__('Active Tab Border Width', 'responsive-tabs-for-elementor'),
382	'type' => Controls_Manager::SLIDER,
383	'range' => [
384	'px' => [
385	'min' => 0,
386	'max' => 10,
387	],
388	],
389	'selectors' => [
390	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper.active' => 'border-width: {{SIZE}}{{UNIT}};',
391	],
392	]
393	);
394	$this->add_control(
395	'tab_active_border_color',
396	[
397	'label' => esc_html__('Active Tab Border Color', 'responsive-tabs-for-elementor'),
398	'type' => Controls_Manager::COLOR,
399	'selectors' => [
400	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper.active' => 'border-color: {{VALUE}};',
401	],
402	]
403	);
404	$this->add_responsive_control(
405	'tab_border_radius',
406	[
407	'label' => esc_html__('Border Radius', 'responsive-tabs-for-elementor'),
408	'type' => Controls_Manager::DIMENSIONS,
409	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
410	'selectors' => [
411	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
412	],
413	]
414	);
415	$this->add_control(
416	'tab_name_color',
417	[
418	'label' => esc_html__('Tab Name Color', 'responsive-tabs-for-elementor'),
419	'type' => Controls_Manager::COLOR,
420	'selectors' => [
421	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-title' => 'color: {{VALUE}}',
422	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-subtitle' => 'color: {{VALUE}}',
423	],
424	'separator' => 'before',
425	]
426	);
427	$this->add_group_control(
428	Group_Control_Typography::get_type(),
429	[
430	'name' => 'tab_name_typography',
431	'label' => esc_html__('Tab Name Typography', 'responsive-tabs-for-elementor'),
432	'selector' => '{{WRAPPER}} .vertical-tabs-section .vertical-tab-title',
433	]
434	);
435	$this->add_control(
436	'active_tab_name_color',
437	[
438	'label' => esc_html__('Active Tab Name Color', 'responsive-tabs-for-elementor'),
439	'type' => Controls_Manager::COLOR,
440	'selectors' => [
441	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper.active .vertical-tab-subtitle' => 'color: {{VALUE}}',
442	],
443	]
444	);
445	$this->add_group_control(
446	Group_Control_Typography::get_type(),
447	[
448	'name' => 'active_tab_name_typography',
449	'label' => esc_html__('Active Tab Name Typography', 'responsive-tabs-for-elementor'),
450	'selector' => '{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper.active .vertical-tab-subtitle',
451	]
452	);
453	$this->add_responsive_control(
454	'tab_name_align',
455	[
456	'label' => esc_html__('Alignment Name', 'responsive-tabs-for-elementor'),
457	'type' => Controls_Manager::CHOOSE,
458	'options' => [
459	'left' => [
460	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
461	'icon' => 'eicon-text-align-left',
462	],
463	'center' => [
464	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
465	'icon' => 'eicon-text-align-center',
466	],
467	'right' => [
468	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
469	'icon' => 'eicon-text-align-right',
470	],
471	],
472	'default' => 'left',
473	'selectors' => [
474	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-subtitle' => 'text-align: {{VALUE}}',
475	],
476	]
477	);
478	$this->add_control(
479	'tab_counter_color',
480	[
481	'label' => esc_html__('Tab Counter Color', 'responsive-tabs-for-elementor'),
482	'type' => Controls_Manager::COLOR,
483	'selectors' => [
484	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper.active .vertical-tab-counter' => 'color: {{VALUE}}',
485	],
486	]
487	);
488	$this->add_group_control(
489	Group_Control_Typography::get_type(),
490	[
491	'name' => 'tab_counter_typography',
492	'label' => esc_html__('Tab Counter Typography', 'responsive-tabs-for-elementor'),
493	'selector' => '{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper.active .vertical-tab-counter',
494	]
495	);
496	$this->add_responsive_control(
497	'tab_counter_align',
498	[
499	'label' => esc_html__('Alignment Counter', 'responsive-tabs-for-elementor'),
500	'type' => Controls_Manager::CHOOSE,
501	'options' => [
502	'left' => [
503	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
504	'icon' => 'eicon-text-align-left',
505	],
506	'center' => [
507	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
508	'icon' => 'eicon-text-align-center',
509	],
510	'right' => [
511	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
512	'icon' => 'eicon-text-align-right',
513	],
514	],
515	'default' => 'left',
516	'selectors' => [
517	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper .vertical-tab-counter' => 'text-align: {{VALUE}}',
518	],
519	]
520	);
521	$this->end_controls_section();
522
523	// Content Styles Section
524	$this->start_controls_section(
525	'content_styles_section',
526	[
527	'label' => esc_html__('Content Styles', 'responsive-tabs-for-elementor'),
528	'tab' => Controls_Manager::TAB_STYLE,
529	]
530	);
531	$this->add_control(
532	'content_color',
533	[
534	'label' => esc_html__('Content Color', 'responsive-tabs-for-elementor'),
535	'type' => Controls_Manager::COLOR,
536	'selectors' => [
537	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper.active p' => 'color: {{VALUE}}',
538	],
539	]
540	);
541	$this->add_group_control(
542	Group_Control_Typography::get_type(),
543	[
544	'name' => 'content_typography',
545	'label' => esc_html__('Content Typography', 'responsive-tabs-for-elementor'),
546	'selector' => '{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper.active p',
547	]
548	);
549	$this->add_responsive_control(
550	'tab_content_align',
551	[
552	'label' => esc_html__('Alignment Content', 'responsive-tabs-for-elementor'),
553	'type' => Controls_Manager::CHOOSE,
554	'options' => [
555	'left' => [
556	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
557	'icon' => 'eicon-text-align-left',
558	],
559	'center' => [
560	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
561	'icon' => 'eicon-text-align-center',
562	],
563	'right' => [
564	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
565	'icon' => 'eicon-text-align-right',
566	],
567	'justify' => [
568	'title' => esc_html__('Justify', 'responsive-tabs-for-elementor'),
569	'icon' => 'eicon-text-align-justify',
570	],
571	],
572	'default' => 'left',
573	'selectors' => [
574	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper p' => 'text-align: {{VALUE}}',
575	],
576	]
577	);
578	$this->end_controls_section();
579
580	// Image Styles Section
581	$this->start_controls_section(
582	'image_styles_section',
583	[
584	'label' => esc_html__('Image Styles', 'responsive-tabs-for-elementor'),
585	'tab' => Controls_Manager::TAB_STYLE,
586	]
587	);
588	$this->add_responsive_control(
589	'tab_image_row_position',
590	[
591	'label' => esc_html__('Images Position', 'responsive-tabs-for-elementor'),
592	'type' => Controls_Manager::CHOOSE,
593	'options' => [
594	'row-reverse' => [
595	'title' => esc_html__('Row-Reverse', 'responsive-tabs-for-elementor'),
596	'icon' => 'eicon-order-start',
597	],
598	'row' => [
599	'title' => esc_html__('Row', 'responsive-tabs-for-elementor'),
600	'icon' => 'eicon-order-end',
601	],
602	],
603	'selectors' => [
604	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-image-wrapper' => 'flex-direction: {{VALUE}}',
605	],
606	'condition' => ['tab_direction' => 'row'],
607	]
608	);
609	$this->add_responsive_control(
610	'tab_image_column_position',
611	[
612	'label' => esc_html__('Images Position', 'responsive-tabs-for-elementor'),
613	'type' => Controls_Manager::CHOOSE,
614	'options' => [
615	'column-reverse' => [
616	'title' => esc_html__('Column-Reverse', 'responsive-tabs-for-elementor'),
617	'icon' => 'eicon-v-align-top',
618	],
619	'column' => [
620	'title' => esc_html__('Column', 'responsive-tabs-for-elementor'),
621	'icon' => 'eicon-v-align-bottom',
622	],
623	],
624	'selectors' => [
625	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-image-wrapper' => 'flex-direction: {{VALUE}}',
626	],
627	'condition' => ['tab_direction' => 'column'],
628	]
629	);
630	$this->add_responsive_control(
631	'tab_image_alignment',
632	[
633	'label' => esc_html__('Alignment', 'responsive-tabs-for-elementor'),
634	'type' => Controls_Manager::CHOOSE,
635	'options' => [
636	'left' => [
637	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
638	'icon' => 'eicon-text-align-left',
639	],
640	'center' => [
641	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
642	'icon' => 'eicon-text-align-center',
643	],
644	'right' => [
645	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
646	'icon' => 'eicon-text-align-right',
647	],
648	],
649	'default' => 'left',
650	'selectors' => [
651	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-img' => 'text-align: {{VALUE}}',
652	],
653	'condition' => ['tab_direction' => 'column'],
654	]
655	);
656	$this->add_responsive_control(
657	'tab_image_width',
658	[
659	'label' => esc_html__('Width', 'responsive-tabs-for-elementor'),
660	'type' => Controls_Manager::SELECT,
661	'default' => '',
662	'options' => [
663	'' => esc_html__('Default', 'responsive-tabs-for-elementor'),
664	'inherit' => esc_html__('Full Width', 'responsive-tabs-for-elementor') . ' (100%)',
665	'initial' => esc_html__('Custom', 'responsive-tabs-for-elementor'),
666	],
667	'selectors_dictionary' => [
668	'inherit' => '100%',
669	],
670	'prefix_class' => 'elementor-widget%s__width-',
671	'selectors' => [
672	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper .vertical-tab-content-img img' => 'width: {{VALUE}};',
673	],
674	]
675	);
676	$this->add_responsive_control(
677	'tab_image_custom_width',
678	[
679	'label' => esc_html__('Width', 'responsive-tabs-for-elementor'),
680	'type' => Controls_Manager::SLIDER,
681	'default' => [
682	'unit' => '%',
683	],
684	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
685	'range' => [
686	'%' => [
687	'min' => 0,
688	'max' => 100,
689	'step' => 1,
690	],
691	'px' => [
692	'min' => 0,
693	'max' => 800,
694	'step' => 1,
695	],
696	],
697	'selectors' => [
698	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper .vertical-tab-content-img img' => '--container-widget-width: {{SIZE}}{{UNIT}}; --container-widget-flex-grow: 0; width: var( --container-widget-width, {{SIZE}}{{UNIT}} );',
699	],
700	'condition' => ['tab_image_width' => 'initial'],
701	]
702	);
703	$this->add_group_control(
704	Group_Control_Border::get_type(),
705	[
706	'name' => 'tab_image_border',
707	'selector' => '{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper .work-items-content img',
708	]
709	);
710	$this->add_responsive_control(
711	'tab_image_border_radius',
712	[
713	'label' => esc_html__('Border Radius', 'responsive-tabs-for-elementor'),
714	'type' => Controls_Manager::DIMENSIONS,
715	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
716	'selectors' => [
717	'{{WRAPPER}} .vertical-tabs-section .vertical-tab-content-wrapper .work-items-content img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
718	],
719	]
720	);
721	$this->end_controls_section();
722	}
723
724	/**
725	* Render the widget output on the frontend.
726	*
727	* Written in PHP and used to generate the final HTML.
728	*
729	* @since 11.0.1
730	*
731	* @access protected
732	*/
733	protected function render()
734	{
735	$settings = $this->get_settings_for_display();
736
737	if ($settings['tab']) { ?>
738
739	<section id="vertical-tabs" class="vertical-tabs-section">
740	<div class="vertical-tab<?php if ($settings['tab_direction'] === "column") { ?> column-tab<?php } ?>">
741	<?php $counter = 1;
742	foreach ($settings['tab'] as $item) { ?>
743	<div class="vertical-tab-content-wrapper">
744	<h3 class="vertical-tab-title"><?php echo wp_kses_post($item['tab_name']); ?></h3>
745	<div class="work-items-content">
746	<div class="vertical-tab-image-wrapper">
747	<div class="vertical-tab-content">
748	<h2 class="vertical-tab-counter"><?php if ($counter < 10)
749	echo '0';
750	echo esc_attr($counter); ?>.</h2>
751	<h4 class="vertical-tab-subtitle"><?php echo wp_kses_post($item['tab_name']); ?></h4>
752	<?php echo wp_kses_post($item['tab_content']); ?>
753	</div>
754	<?php if (wp_kses_post($item['tab_image_active']) === 'yes') { ?>
755	<div class="vertical-tab-content-img">
756	<img src="<?php echo esc_url($item['tab_image']['url']) ?>">
757	</div>
758	<?php } ?>
759	</div>
760	</div>
761	</div>
762	<?php $counter++;
763	} ?>
764	</div>
765	</section>
766	<?php } ?>
767	<?php }
768	}
769