Image_Accordion.php — Essential Addons for Elementor – Popular Elementor Templates & Widgets 4.6.6

essential-addons-for-elementor-lite / includes / Elements / Image_Accordion.php

essential-addons-for-elementor-lite / includes / Elements Last commit date

Adv_Accordion.php 5 years ago Adv_Tabs.php 5 years ago Advanced_Data_Table.php 5 years ago Betterdocs_Category_Box.php 5 years ago Betterdocs_Category_Grid.php 5 years ago Betterdocs_Search_Form.php 5 years ago Caldera_Forms.php 5 years ago Career_Page.php 5 years ago Contact_Form_7.php 5 years ago Content_Ticker.php 5 years ago Countdown.php 5 years ago Creative_Button.php 5 years ago Crowdfundly_All_Campaign.php 5 years ago Crowdfundly_Organization.php 5 years ago Crowdfundly_Single_Campaign.php 5 years ago Cta_Box.php 5 years ago Data_Table.php 5 years ago Dual_Color_Header.php 5 years ago EmbedPress.php 5 years ago Event_Calendar.php 5 years ago Facebook_Feed.php 5 years ago Fancy_Text.php 5 years ago Feature_List.php 5 years ago Filterable_Gallery.php 5 years ago Flip_Box.php 5 years ago FluentForm.php 5 years ago Formstack.php 5 years ago GravityForms.php 5 years ago Image_Accordion.php 5 years ago Info_Box.php 5 years ago Login_Register.php 5 years ago NinjaForms.php 5 years ago Post_Grid.php 5 years ago Post_Timeline.php 5 years ago Pricing_Table.php 5 years ago Product_Grid.php 5 years ago Progress_Bar.php 5 years ago Sticky_Video.php 5 years ago Team_Member.php 5 years ago Testimonial.php 5 years ago Tooltip.php 5 years ago Twitter_Feed.php 5 years ago TypeForm.php 5 years ago WeForms.php 5 years ago Woo_Checkout.php 5 years ago Woo_Product_Carousel.php 5 years ago Woo_Product_Compare.php 5 years ago Woocommerce_Review.php 5 years ago WpForms.php 5 years ago

Image_Accordion.php

634 lines

1	<?php
2
3	namespace Essential_Addons_Elementor\Elements;
4
5	// If this file is called directly, abort.
6	if ( !defined( 'ABSPATH' ) ) {
7	exit;
8	}
9
10	use \Elementor\Controls_Manager;
11	use \Elementor\Group_Control_Border;
12	use \Elementor\Group_Control_Box_Shadow;
13	use \Elementor\Group_Control_Typography;
14	use \Elementor\Widget_Base;
15	use \Elementor\Repeater;
16
17
18	use \Essential_Addons_Elementor\Classes\Helper;
19
20	class Image_Accordion extends Widget_Base {
21	public function get_name() {
22	return 'eael-image-accordion';
23	}
24
25	public function get_title() {
26	return esc_html__( 'Image Accordion', 'essential-addons-for-elementor-lite' );
27	}
28
29	public function get_icon() {
30	return 'eaicon-image-accrodion';
31	}
32
33	public function get_categories() {
34	return [ 'essential-addons-elementor' ];
35	}
36
37	public function get_keywords() {
38	return [
39	'image',
40	'ea image accordion',
41	'image effect',
42	'hover effect',
43	'creative image',
44	'gallery',
45	'ea',
46	'essential addons',
47	];
48	}
49
50	public function get_custom_help_url() {
51	return 'https://essential-addons.com/elementor/docs/image-accordion/';
52	}
53
54	protected function _register_controls() {
55	/**
56	* Image accordion Content Settings
57	*/
58	$this->start_controls_section(
59	'eael_section_img_accordion_settings',
60	[
61	'label' => esc_html__( 'General', 'essential-addons-for-elementor-lite' ),
62	]
63	);
64
65	$this->add_control(
66	'eael_img_accordion_type',
67	[
68	'label' => esc_html__( 'Accordion Style', 'essential-addons-for-elementor-lite' ),
69	'type' => Controls_Manager::SELECT,
70	'default' => 'on-hover',
71	'label_block' => false,
72	'options' => [
73	'on-hover' => esc_html__( 'On Hover', 'essential-addons-for-elementor-lite' ),
74	'on-click' => esc_html__( 'On Click', 'essential-addons-for-elementor-lite' ),
75	],
76	]
77	);
78
79	$this->add_control(
80	'eael_img_accordion_direction',
81	[
82	'label' => esc_html__( 'Direction', 'essential-addons-for-elementor-lite' ),
83	'type' => Controls_Manager::SELECT,
84	'default' => 'on-hover',
85	'label_block' => false,
86	'options' => [
87	'accordion-direction-horizontal' => esc_html__( 'Horizontal', 'essential-addons-for-elementor-lite' ),
88	'accordion-direction-vertical' => esc_html__( 'Vertical', 'essential-addons-for-elementor-lite' ),
89	],
90	'default' => 'accordion-direction-horizontal',
91	]
92	);
93
94	$this->add_control(
95	'eael_img_accordion_content_heading',
96	[
97	'label' => __( 'Content', 'essential-addons-for-elementor-lite' ),
98	'type' => \Elementor\Controls_Manager::HEADING,
99	]
100	);
101
102	$this->add_control(
103	'eael_img_accordion_content_horizontal_align',
104	[
105	'label' => __( 'Horizontal Alignment', 'essential-addons-for-elementor-lite' ),
106	'type' => \Elementor\Controls_Manager::CHOOSE,
107	'options' => [
108	'left' => [
109	'title' => __( 'Left', 'essential-addons-for-elementor-lite' ),
110	'icon' => 'fa fa-align-left',
111	],
112	'center' => [
113	'title' => __( 'Center', 'essential-addons-for-elementor-lite' ),
114	'icon' => 'fa fa-align-center',
115	],
116	'right' => [
117	'title' => __( 'Right', 'essential-addons-for-elementor-lite' ),
118	'icon' => 'fa fa-align-right',
119	],
120	],
121	'default' => 'center',
122	'toggle' => true,
123	]
124	);
125	$this->add_control(
126	'eael_img_accordion_content_vertical_align',
127	[
128	'label' => __( 'Vertical Alignment', 'essential-addons-for-elementor-lite' ),
129	'type' => \Elementor\Controls_Manager::CHOOSE,
130	'options' => [
131	'top' => [
132	'title' => __( 'Top', 'essential-addons-for-elementor-lite' ),
133	'icon' => 'fa fa-arrow-circle-up',
134	],
135	'center' => [
136	'title' => __( 'Center', 'essential-addons-for-elementor-lite' ),
137	'icon' => 'fa fa-align-center',
138	],
139	'bottom' => [
140	'title' => __( 'Bottom', 'essential-addons-for-elementor-lite' ),
141	'icon' => 'fa fa-arrow-circle-down',
142	],
143	],
144	'default' => 'center',
145	'toggle' => true,
146	]
147	);
148
149	$this->add_control(
150	'title_tag',
151	[
152	'label' => __( 'Select Tag', 'essential-addons-for-elementor-lite' ),
153	'type' => Controls_Manager::SELECT,
154	'default' => 'h2',
155	'options' => [
156	'h1' => __( 'H1', 'essential-addons-for-elementor-lite' ),
157	'h2' => __( 'H2', 'essential-addons-for-elementor-lite' ),
158	'h3' => __( 'H3', 'essential-addons-for-elementor-lite' ),
159	'h4' => __( 'H4', 'essential-addons-for-elementor-lite' ),
160	'h5' => __( 'H5', 'essential-addons-for-elementor-lite' ),
161	'h6' => __( 'H6', 'essential-addons-for-elementor-lite' ),
162	'span' => __( 'Span', 'essential-addons-for-elementor-lite' ),
163	'p' => __( 'P', 'essential-addons-for-elementor-lite' ),
164	'div' => __( 'Div', 'essential-addons-for-elementor-lite' ),
165	],
166	]
167	);
168
169	$repeater = new Repeater();
170
171	$repeater->add_control(
172	'eael_accordion_is_active',
173	[
174	'label' => __( 'Make it active?', 'essential-addons-for-elementor-lite' ),
175	'type' => Controls_Manager::SWITCHER,
176	'label_on' => __( 'Yes', 'essential-addons-for-elementor-lite' ),
177	'label_off' => __( 'No', 'essential-addons-for-elementor-lite' ),
178	'return_value' => 'yes',
179	]
180	);
181
182	$repeater->add_control(
183	'eael_accordion_bg',
184	[
185	'label' => esc_html__( 'Background Image', 'essential-addons-for-elementor-lite' ),
186	'type' => Controls_Manager::MEDIA,
187	'label_block' => true,
188	'default' => [
189	'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png',
190	],
191	]
192	);
193
194	$repeater->add_control(
195	'eael_accordion_tittle',
196	[
197	'label' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ),
198	'type' => Controls_Manager::TEXT,
199	'label_block' => true,
200	'default' => esc_html__( 'Accordion item title', 'essential-addons-for-elementor-lite' ),
201	'dynamic' => [ 'active' => true ],
202	]
203	);
204
205	$repeater->add_control(
206	'eael_accordion_content',
207	[
208	'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ),
209	'type' => Controls_Manager::WYSIWYG,
210	'label_block' => true,
211	'default' => esc_html__( 'Accordion content goes here!', 'essential-addons-for-elementor-lite' ),
212	]
213	);
214
215	$repeater->add_control(
216	'eael_accordion_enable_title_link',
217	[
218	'label' => esc_html__( 'Enable Title Link', 'essential-addons-for-elementor-lite' ),
219	'type' => Controls_Manager::SWITCHER,
220	'label_on' => __( 'Show', 'your-plugin' ),
221	'label_off' => __( 'Hide', 'your-plugin' ),
222	'return_value' => 'yes',
223	'default' => 'yes',
224	]
225	);
226
227	$repeater->add_control(
228	'eael_accordion_title_link',
229	[
230	'name' => 'eael_accordion_title_link',
231	'label' => esc_html__( 'Title Link', 'essential-addons-for-elementor-lite' ),
232	'type' => Controls_Manager::URL,
233	'dynamic' => [ 'active' => true ],
234	'label_block' => true,
235	'default' => [
236	'url' => '#',
237	'is_external' => '',
238	],
239	'show_external' => true,
240	'condition' => [
241	'eael_accordion_enable_title_link' => 'yes',
242	],
243	]
244	);
245
246	$this->add_control(
247	'eael_img_accordions',
248	[
249	'type' => Controls_Manager::REPEATER,
250	'seperator' => 'before',
251	'default' => [
252	[
253	'eael_accordion_tittle' => esc_html__( 'Image Accordion #1', 'essential-addons-for-elementor-lite' ),
254	'eael_accordion_content' => esc_html__( 'Image Accordion Content Goes Here! Click edit button to change this text.', 'essential-addons-for-elementor-lite' ),
255	'eael_accordion_bg' => [
256	'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png',
257	]
258	],
259	[
260	'eael_accordion_tittle' => esc_html__( 'Image Accordion #2', 'essential-addons-for-elementor-lite' ),
261	'eael_accordion_content' => esc_html__( 'Image Accordion Content Goes Here! Click edit button to change this text.', 'essential-addons-for-elementor-lite' ),
262	'eael_accordion_bg' => [
263	'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png',
264	]
265	],
266	[
267	'eael_accordion_tittle' => esc_html__( 'Image Accordion #3', 'essential-addons-for-elementor-lite' ),
268	'eael_accordion_content' => esc_html__( 'Image Accordion Content Goes Here! Click edit button to change this text.', 'essential-addons-for-elementor-lite' ),
269	'eael_accordion_bg' => [
270	'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png',
271	]
272	],
273	[
274	'eael_accordion_tittle' => esc_html__( 'Image Accordion #4', 'essential-addons-for-elementor-lite' ),
275	'eael_accordion_content' => esc_html__( 'Image Accordion Content Goes Here! Click edit button to change this text.', 'essential-addons-for-elementor-lite' ),
276	'eael_accordion_bg' => [
277	'url' => EAEL_PLUGIN_URL . '/assets/front-end/img/accordion.png',
278	]
279	],
280	],
281	'fields' => $repeater->get_controls(),
282	'title_field' => '{{eael_accordion_tittle}}',
283	]
284	);
285
286	$this->end_controls_section();
287
288	/**
289	* -------------------------------------------
290	* Tab Style (Image accordion)
291	* -------------------------------------------
292	*/
293	$this->start_controls_section(
294	'eael_section_img_accordion_style_settings',
295	[
296	'label' => esc_html__( 'General', 'essential-addons-for-elementor-lite' ),
297	'tab' => Controls_Manager::TAB_STYLE,
298	]
299	);
300
301	$this->add_control(
302	'eael_accordion_height',
303	[
304	'label' => esc_html__( 'Height', 'essential-addons-for-elementor-lite' ),
305	'type' => Controls_Manager::TEXT,
306	'default' => '400',
307	'description' => 'Unit in px',
308	'selectors' => [
309	'{{WRAPPER}} .eael-img-accordion ' => 'height: {{VALUE}}px;',
310	],
311	]
312	);
313
314	$this->add_control(
315	'eael_accordion_bg_color',
316	[
317	'label' => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ),
318	'type' => Controls_Manager::COLOR,
319	'default' => '',
320	'selectors' => [
321	'{{WRAPPER}} .eael-img-accordion' => 'background-color: {{VALUE}};',
322	],
323	]
324	);
325
326	$this->add_responsive_control(
327	'eael_accordion_container_padding',
328	[
329	'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ),
330	'type' => Controls_Manager::DIMENSIONS,
331	'size_units' => [ 'px', 'em', '%' ],
332	'selectors' => [
333	'{{WRAPPER}} .eael-img-accordion' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
334	],
335	]
336	);
337
338	$this->add_responsive_control(
339	'eael_accordion_container_margin',
340	[
341	'label' => esc_html__( 'Margin', 'essential-addons-for-elementor-lite' ),
342	'type' => Controls_Manager::DIMENSIONS,
343	'size_units' => [ 'px', 'em', '%' ],
344	'selectors' => [
345	'{{WRAPPER}} .eael-img-accordion' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
346	],
347	]
348	);
349
350	$this->add_group_control(
351	Group_Control_Border::get_type(),
352	[
353	'name' => 'eael_accordion_border',
354	'label' => esc_html__( 'Border', 'essential-addons-for-elementor-lite' ),
355	'selector' => '{{WRAPPER}} .eael-img-accordion',
356	]
357	);
358
359	$this->add_control(
360	'eael_accordion_border_radius',
361	[
362	'label' => esc_html__( 'Border Radius', 'essential-addons-for-elementor-lite' ),
363	'type' => Controls_Manager::SLIDER,
364	'default' => [
365	'size' => 4,
366	],
367	'range' => [
368	'px' => [
369	'max' => 500,
370	],
371	],
372	'selectors' => [
373	'{{WRAPPER}} .eael-img-accordion' => 'border-radius: {{SIZE}}px;',
374	'{{WRAPPER}} .eael-img-accordion a:first-child' => 'border-radius: {{SIZE}}px 0 0 {{SIZE}}px;',
375	'{{WRAPPER}} .eael-img-accordion a:last-child' => 'border-radius: 0 {{SIZE}}px {{SIZE}}px 0;',
376	],
377	]
378	);
379
380	$this->add_group_control(
381	Group_Control_Box_Shadow::get_type(),
382	[
383	'name' => 'eael_accordion_shadow',
384	'selector' => '{{WRAPPER}} .eael-img-accordion',
385	]
386	);
387
388	$this->add_control(
389	'eael_accordion_img_overlay_color',
390	[
391	'label' => esc_html__( 'Overlay Color', 'essential-addons-for-elementor-lite' ),
392	'type' => Controls_Manager::COLOR,
393	'default' => 'rgba(0, 0, 0, .3)',
394	'selectors' => [
395	'{{WRAPPER}} .eael-img-accordion .eael-image-accordion-hover:before' => 'background-color: {{VALUE}};',
396	],
397	]
398	);
399
400	$this->add_control(
401	'eael_accordion_img_hover_color',
402	[
403	'label' => esc_html__( 'Hover Overlay Color', 'essential-addons-for-elementor-lite' ),
404	'type' => Controls_Manager::COLOR,
405	'default' => 'rgba(0, 0, 0, .5)',
406	'selectors' => [
407	'{{WRAPPER}} .eael-img-accordion .eael-image-accordion-hover:hover::before' => 'background-color: {{VALUE}};',
408	'{{WRAPPER}} .eael-img-accordion .eael-image-accordion-hover.overlay-active:hover::before' => 'background-color: {{VALUE}};',
409	],
410	]
411	);
412
413	$this->end_controls_section();
414	/**
415	* -------------------------------------------
416	* Tab Style (Thumbnail Style)
417	* -------------------------------------------
418	*/
419	$this->start_controls_section(
420	'eael_section_img_accordion_thumbnail_style_settings',
421	[
422	'label' => esc_html__( 'Thumbnail', 'essential-addons-for-elementor-lite' ),
423	'tab' => Controls_Manager::TAB_STYLE,
424	]
425	);
426
427	$this->add_control(
428	'eael_image_accordion_thumbnail_margin',
429	[
430	'label' => __( 'Margin', 'essential-addons-for-elementor-lite' ),
431	'type' => Controls_Manager::DIMENSIONS,
432	'size_units' => [ 'px', '%', 'em' ],
433	'selectors' => [
434	'{{WRAPPER}} .eael-img-accordion a' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
435	],
436	]
437	);
438	$this->add_control(
439	'eael_image_accordion_thumbnail_padding',
440	[
441	'label' => __( 'Padding', 'essential-addons-for-elementor-lite' ),
442	'type' => Controls_Manager::DIMENSIONS,
443	'size_units' => [ 'px', '%', 'em' ],
444	'selectors' => [
445	'{{WRAPPER}} .eael-img-accordion a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
446	],
447	]
448	);
449	$this->add_control(
450	'eael_image_accordion_thumbnail_radius',
451	[
452	'label' => __( 'Border Radius', 'essential-addons-for-elementor-lite' ),
453	'type' => Controls_Manager::DIMENSIONS,
454	'size_units' => [ 'px', '%', 'em' ],
455	'selectors' => [
456	'{{WRAPPER}} .eael-img-accordion a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}!important;',
457	],
458	]
459	);
460	$this->add_group_control(
461	\Elementor\Group_Control_Border::get_type(),
462	[
463	'name' => 'eael_image_accordion_thumbnail_border',
464	'label' => __( 'Border', 'essential-addons-for-elementor-lite' ),
465	'selector' => '{{WRAPPER}} .eael-img-accordion a',
466	]
467	);
468
469	$this->end_controls_section();
470
471	/**
472	* -------------------------------------------
473	* Tab Style (Image accordion Content Style)
474	* -------------------------------------------
475	*/
476	$this->start_controls_section(
477	'eael_section_img_accordion_typography_settings',
478	[
479	'label' => esc_html__( 'Color & Typography', 'essential-addons-for-elementor-lite' ),
480	'tab' => Controls_Manager::TAB_STYLE,
481	]
482	);
483
484	$this->add_control(
485	'eael_accordion_title_text',
486	[
487	'label' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ),
488	'type' => Controls_Manager::HEADING,
489	'separator' => 'before',
490	]
491	);
492
493	$this->add_control(
494	'eael_accordion_title_color',
495	[
496	'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),
497	'type' => Controls_Manager::COLOR,
498	'default' => '#fff',
499	'selectors' => [
500	'{{WRAPPER}} .eael-img-accordion .overlay .img-accordion-title' => 'color: {{VALUE}};',
501	],
502	]
503	);
504
505	$this->add_group_control(
506	Group_Control_Typography::get_type(),
507	[
508	'name' => 'eael_accordion_title_typography',
509	'selector' => '{{WRAPPER}} .eael-img-accordion .overlay .img-accordion-title',
510	]
511	);
512
513	$this->add_control(
514	'eael_accordion_content_text',
515	[
516	'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ),
517	'type' => Controls_Manager::HEADING,
518	'separator' => 'before',
519	]
520	);
521
522	$this->add_control(
523	'eael_accordion_content_color',
524	[
525	'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),
526	'type' => Controls_Manager::COLOR,
527	'default' => '#fff',
528	'selectors' => [
529	'{{WRAPPER}} .eael-img-accordion .overlay p' => 'color: {{VALUE}};',
530	],
531	]
532	);
533
534	$this->add_group_control(
535	Group_Control_Typography::get_type(),
536	[
537	'name' => 'eael_accordion_content_typography',
538	'selector' => '{{WRAPPER}} .eael-img-accordion .overlay p',
539	]
540	);
541
542	$this->end_controls_section();
543
544	}
545
546	protected function render() {
547	$settings = $this->get_settings_for_display();
548	$horizontal_alignment = 'eael-img-accordion-horizontal-align-' . $settings[ 'eael_img_accordion_content_horizontal_align' ];
549	$vertical_alignment = 'eael-img-accordion-vertical-align-' . $settings[ 'eael_img_accordion_content_vertical_align' ];
550
551	$this->add_render_attribute(
552	'eael-image-accordion',
553	[
554	'class' => [
555	'eael-img-accordion',
556	$settings[ 'eael_img_accordion_direction' ],
557	$horizontal_alignment,
558	$vertical_alignment,
559	],
560	'id' => 'eael-img-accordion-' . $this->get_id(),
561	]
562	);
563
564
565	$this->add_render_attribute( 'eael-image-accordion', 'data-img-accordion-id', esc_attr( $this->get_id() ) );
566	$this->add_render_attribute( 'eael-image-accordion', 'data-img-accordion-type', $settings[ 'eael_img_accordion_type' ] );
567	if ( empty( $settings[ 'eael_img_accordions' ] ) ) {
568	return;
569	}
570	?>
571	<div <?php echo $this->get_render_attribute_string( 'eael-image-accordion' ); ?>>
572	<?php foreach ( $settings[ 'eael_img_accordions' ] as $key => $img_accordion ): ?>
573	<?php
574	$eael_accordion_link = $target = $nofollow = $attributes = $active = '';
575	$tag = 'div';
576	if ( $img_accordion[ 'eael_accordion_enable_title_link' ] == 'yes' ) {
577	$eael_accordion_link = ( '#' === $img_accordion[ 'eael_accordion_title_link' ][ 'url' ] ) ? '#/' : $img_accordion[ 'eael_accordion_title_link' ][ 'url' ];
578
579	$target = $img_accordion[ 'eael_accordion_title_link' ][ 'is_external' ] ? 'target="_blank"' : '';
580	$nofollow = $img_accordion[ 'eael_accordion_title_link' ][ 'nofollow' ] ? 'rel="nofollow"' : '';
581	if($img_accordion['eael_accordion_title_link']['custom_attributes']){
582	$attributes = str_replace("\|",'="',$img_accordion['eael_accordion_title_link']['custom_attributes']);
583	$attributes = str_replace(",",'" ',$attributes);
584	$attributes .='"';
585	}
586	$active = $img_accordion[ 'eael_accordion_is_active' ];
587	$this->add_render_attribute( 'eael-image-accordion-link-' . $key, 'href', esc_url( $eael_accordion_link ));
588
589	$tag = 'a';
590	}
591	$activeCSS = ( $active === 'yes' ? ' flex: 3 1 0%;' : '' );
592	$this->add_render_attribute(
593	'eael-image-accordion-link-' . $key,
594	[
595	'class' => 'eael-image-accordion-hover',
596	'style' => "background-image: url(" . esc_url( $img_accordion[ 'eael_accordion_bg' ][ 'url' ] ) . ");" . $activeCSS,
597	]
598	);
599	if ( $active === 'yes' ) {
600	$this->add_render_attribute( 'eael-image-accordion-link-' . $key, 'class', 'overlay-active' );
601	}
602	?>
603
604	<<?php echo $tag.' '; ?><?php echo $this->get_render_attribute_string( 'eael-image-accordion-link-' . $key ), $target,$nofollow,$attributes; ?> tabindex="<?php echo $key; ?>">
605	<div class="overlay">
606	<div class="overlay-inner">
607	<div class="overlay-inner <?php echo( $active === 'yes' ? ' overlay-inner-show' : '' ); ?>">
608	<?php printf( '<%1$s class="img-accordion-title">%2$s</%1$s>', Helper::eael_validate_html_tag($settings[ 'title_tag' ]), Helper::eael_wp_kses($img_accordion[ 'eael_accordion_tittle' ]) ); ?>
609	<p><?php echo sprintf( "%s", $this->parse_text_editor( $img_accordion[ 'eael_accordion_content' ] ) ); ?></p>
610	</div>
611	</div>
612	</div>
613	</<?php echo $tag; ?>>
614	<?php endforeach; ?>
615	</div>
616	<?php
617	if ( !empty( $settings[ 'eael_img_accordions' ] ) ) {
618	if ( 'on-hover' === $settings[ 'eael_img_accordion_type' ] ) {
619	echo '<style typr="text/css">
620	#eael-img-accordion-' . $this->get_id() . ' .eael-image-accordion-hover:hover {
621	flex: 3 1 0% !important;
622	}
623	#eael-img-accordion-' . $this->get_id() . ' .eael-image-accordion-hover:hover:hover .overlay-inner * {
624	opacity: 1;
625	visibility: visible;
626	transform: none;
627	transition: all .3s .3s;
628	}
629	</style>';
630	}
631	}
632	}
633	}
634