elementor / includes / widgets / toggle.php

toggle.php in Elementor Website Builder – more than just a page builder 3.19.0-dev3, at includes/widgets/toggle.php

722 lines 19.5 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor toggle widget.
13	*
14	* Elementor widget that displays a collapsible display of content in an toggle
15	* style, allowing the user to open multiple items.
16	*
17	* @since 1.0.0
18	*/
19	class Widget_Toggle extends Widget_Base {
20
21	/**
22	* Get widget name.
23	*
24	* Retrieve toggle widget name.
25	*
26	* @since 1.0.0
27	* @access public
28	*
29	* @return string Widget name.
30	*/
31	public function get_name() {
32	return 'toggle';
33	}
34
35	/**
36	* Get widget title.
37	*
38	* Retrieve toggle widget title.
39	*
40	* @since 1.0.0
41	* @access public
42	*
43	* @return string Widget title.
44	*/
45	public function get_title() {
46	return esc_html__( 'Toggle', 'elementor' );
47	}
48
49	/**
50	* Get widget icon.
51	*
52	* Retrieve toggle widget icon.
53	*
54	* @since 1.0.0
55	* @access public
56	*
57	* @return string Widget icon.
58	*/
59	public function get_icon() {
60	return 'eicon-toggle';
61	}
62
63	/**
64	* Get widget keywords.
65	*
66	* Retrieve the list of keywords the widget belongs to.
67	*
68	* @since 2.1.0
69	* @access public
70	*
71	* @return array Widget keywords.
72	*/
73	public function get_keywords() {
74	return [ 'tabs', 'accordion', 'toggle' ];
75	}
76
77	/**
78	* Hide widget from panel.
79	*
80	* Hide the toggle widget from the panel if nested-accordion experiment is active.
81	*
82	* @since 3.15.0
83	* @return bool
84	*/
85	public function show_in_panel(): bool {
86	return ! Plugin::$instance->experiments->is_feature_active( 'nested-elements' );
87	}
88
89	/**
90	* Register toggle widget controls.
91	*
92	* Adds different input fields to allow the user to change and customize the widget settings.
93	*
94	* @since 3.1.0
95	* @access protected
96	*/
97	protected function register_controls() {
98	$this->start_controls_section(
99	'section_toggle',
100	[
101	'label' => esc_html__( 'Toggle', 'elementor' ),
102	]
103	);
104
105	$repeater = new Repeater();
106
107	$repeater->add_control(
108	'tab_title',
109	[
110	'label' => esc_html__( 'Title', 'elementor' ),
111	'type' => Controls_Manager::TEXT,
112	'default' => esc_html__( 'Toggle Title', 'elementor' ),
113	'label_block' => true,
114	'dynamic' => [
115	'active' => true,
116	],
117	]
118	);
119
120	$repeater->add_control(
121	'tab_content',
122	[
123	'label' => esc_html__( 'Content', 'elementor' ),
124	'type' => Controls_Manager::WYSIWYG,
125	'default' => esc_html__( 'Toggle Content', 'elementor' ),
126	'dynamic' => [
127	'active' => true,
128	],
129	]
130	);
131
132	if ( Plugin::$instance->widgets_manager->get_widget_types( 'nested-accordion' ) ) {
133	$this->add_deprecation_message(
134	'3.15.0',
135	esc_html__(
136	'You are currently editing a Toggle widget in its old version. Drag a new Accordion widget onto your page to use a newer version, providing nested capabilities.',
137	'elementor'
138	),
139	'nested-accordion'
140	);
141	}
142
143	$this->add_control(
144	'tabs',
145	[
146	'label' => esc_html__( 'Toggle Items', 'elementor' ),
147	'type' => Controls_Manager::REPEATER,
148	'fields' => $repeater->get_controls(),
149	'default' => [
150	[
151	'tab_title' => esc_html__( 'Toggle #1', 'elementor' ),
152	'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
153	],
154	[
155	'tab_title' => esc_html__( 'Toggle #2', 'elementor' ),
156	'tab_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
157	],
158	],
159	'title_field' => '{{{ tab_title }}}',
160	]
161	);
162
163	$this->add_control(
164	'selected_icon',
165	[
166	'label' => esc_html__( 'Icon', 'elementor' ),
167	'type' => Controls_Manager::ICONS,
168	'separator' => 'before',
169	'fa4compatibility' => 'icon',
170	'default' => [
171	'value' => 'fas fa-caret' . ( is_rtl() ? '-left' : '-right' ),
172	'library' => 'fa-solid',
173	],
174	'recommended' => [
175	'fa-solid' => [
176	'chevron-down',
177	'angle-down',
178	'angle-double-down',
179	'caret-down',
180	'caret-square-down',
181	],
182	'fa-regular' => [
183	'caret-square-down',
184	],
185	],
186	'label_block' => false,
187	'skin' => 'inline',
188	]
189	);
190
191	$this->add_control(
192	'selected_active_icon',
193	[
194	'label' => esc_html__( 'Active Icon', 'elementor' ),
195	'type' => Controls_Manager::ICONS,
196	'fa4compatibility' => 'icon_active',
197	'default' => [
198	'value' => 'fas fa-caret-up',
199	'library' => 'fa-solid',
200	],
201	'recommended' => [
202	'fa-solid' => [
203	'chevron-up',
204	'angle-up',
205	'angle-double-up',
206	'caret-up',
207	'caret-square-up',
208	],
209	'fa-regular' => [
210	'caret-square-up',
211	],
212	],
213	'skin' => 'inline',
214	'label_block' => false,
215	'condition' => [
216	'selected_icon[value]!' => '',
217	],
218	]
219	);
220
221	$this->add_control(
222	'title_html_tag',
223	[
224	'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
225	'type' => Controls_Manager::SELECT,
226	'options' => [
227	'h1' => 'H1',
228	'h2' => 'H2',
229	'h3' => 'H3',
230	'h4' => 'H4',
231	'h5' => 'H5',
232	'h6' => 'H6',
233	'div' => 'div',
234	],
235	'default' => 'div',
236	'separator' => 'before',
237	]
238	);
239
240	$this->add_control(
241	'faq_schema',
242	[
243	'label' => esc_html__( 'FAQ Schema', 'elementor' ),
244	'type' => Controls_Manager::SWITCHER,
245	'separator' => 'before',
246	]
247	);
248
249	$this->end_controls_section();
250
251	$this->start_controls_section(
252	'section_toggle_style',
253	[
254	'label' => esc_html__( 'Toggle', 'elementor' ),
255	'tab' => Controls_Manager::TAB_STYLE,
256	]
257	);
258
259	$this->add_control(
260	'border_width',
261	[
262	'label' => esc_html__( 'Border Width', 'elementor' ),
263	'type' => Controls_Manager::SLIDER,
264	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
265	'range' => [
266	'px' => [
267	'max' => 20,
268	],
269	'em' => [
270	'max' => 2,
271	],
272	],
273	'selectors' => [
274	'{{WRAPPER}} .elementor-tab-title' => 'border-width: {{SIZE}}{{UNIT}};',
275	'{{WRAPPER}} .elementor-tab-content' => 'border-width: {{SIZE}}{{UNIT}};',
276	],
277	]
278	);
279
280	$this->add_control(
281	'border_color',
282	[
283	'label' => esc_html__( 'Border Color', 'elementor' ),
284	'type' => Controls_Manager::COLOR,
285	'selectors' => [
286	'{{WRAPPER}} .elementor-tab-content' => 'border-bottom-color: {{VALUE}};',
287	'{{WRAPPER}} .elementor-tab-title' => 'border-color: {{VALUE}};',
288	],
289	]
290	);
291
292	$this->add_responsive_control(
293	'space_between',
294	[
295	'label' => esc_html__( 'Space Between', 'elementor' ),
296	'type' => Controls_Manager::SLIDER,
297	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
298	'range' => [
299	'px' => [
300	'max' => 100,
301	],
302	'em' => [
303	'max' => 10,
304	],
305	'rem' => [
306	'max' => 10,
307	],
308	],
309	'selectors' => [
310	'{{WRAPPER}} .elementor-toggle-item:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}}',
311	],
312	]
313	);
314
315	$this->add_group_control(
316	Group_Control_Box_Shadow::get_type(),
317	[
318	'name' => 'box_shadow',
319	'selector' => '{{WRAPPER}} .elementor-toggle-item',
320	]
321	);
322
323	$this->end_controls_section();
324
325	$this->start_controls_section(
326	'section_toggle_style_title',
327	[
328	'label' => esc_html__( 'Title', 'elementor' ),
329	'tab' => Controls_Manager::TAB_STYLE,
330	]
331	);
332
333	$this->add_control(
334	'title_background',
335	[
336	'label' => esc_html__( 'Background', 'elementor' ),
337	'type' => Controls_Manager::COLOR,
338	'selectors' => [
339	'{{WRAPPER}} .elementor-tab-title' => 'background-color: {{VALUE}};',
340	],
341	]
342	);
343
344	// The title selector specificity is to override Theme Style
345	$this->add_control(
346	'title_color',
347	[
348	'label' => esc_html__( 'Color', 'elementor' ),
349	'type' => Controls_Manager::COLOR,
350	'selectors' => [
351	'{{WRAPPER}} .elementor-toggle-title, {{WRAPPER}} .elementor-toggle-icon' => 'color: {{VALUE}};',
352	'{{WRAPPER}} .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
353	],
354	'global' => [
355	'default' => Global_Colors::COLOR_PRIMARY,
356	],
357	]
358	);
359
360	$this->add_control(
361	'tab_active_color',
362	[
363	'label' => esc_html__( 'Active Color', 'elementor' ),
364	'type' => Controls_Manager::COLOR,
365	'selectors' => [
366	'{{WRAPPER}} .elementor-tab-title.elementor-active a, {{WRAPPER}} .elementor-tab-title.elementor-active .elementor-toggle-icon' => 'color: {{VALUE}};',
367	],
368	'global' => [
369	'default' => Global_Colors::COLOR_ACCENT,
370	],
371	]
372	);
373
374	$this->add_group_control(
375	Group_Control_Typography::get_type(),
376	[
377	'name' => 'title_typography',
378	'selector' => '{{WRAPPER}} .elementor-toggle-title',
379	'global' => [
380	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
381	],
382	]
383	);
384
385	$this->add_group_control(
386	Group_Control_Text_Shadow::get_type(),
387	[
388	'name' => 'title_shadow',
389	'selector' => '{{WRAPPER}} .elementor-toggle-title',
390	]
391	);
392
393	$this->add_responsive_control(
394	'title_padding',
395	[
396	'label' => esc_html__( 'Padding', 'elementor' ),
397	'type' => Controls_Manager::DIMENSIONS,
398	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
399	'selectors' => [
400	'{{WRAPPER}} .elementor-tab-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
401	],
402	]
403	);
404
405	$this->end_controls_section();
406
407	$this->start_controls_section(
408	'section_toggle_style_icon',
409	[
410	'label' => esc_html__( 'Icon', 'elementor' ),
411	'tab' => Controls_Manager::TAB_STYLE,
412	'condition' => [
413	'selected_icon[value]!' => '',
414	],
415	]
416	);
417
418	$this->add_control(
419	'icon_align',
420	[
421	'label' => esc_html__( 'Alignment', 'elementor' ),
422	'type' => Controls_Manager::CHOOSE,
423	'options' => [
424	'left' => [
425	'title' => esc_html__( 'Start', 'elementor' ),
426	'icon' => 'eicon-h-align-left',
427	],
428	'right' => [
429	'title' => esc_html__( 'End', 'elementor' ),
430	'icon' => 'eicon-h-align-right',
431	],
432	],
433	'default' => is_rtl() ? 'right' : 'left',
434	'toggle' => false,
435	]
436	);
437
438	$this->add_control(
439	'icon_color',
440	[
441	'label' => esc_html__( 'Color', 'elementor' ),
442	'type' => Controls_Manager::COLOR,
443	'selectors' => [
444	'{{WRAPPER}} .elementor-tab-title .elementor-toggle-icon i:before' => 'color: {{VALUE}};',
445	'{{WRAPPER}} .elementor-tab-title .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
446	],
447	]
448	);
449
450	$this->add_control(
451	'icon_active_color',
452	[
453	'label' => esc_html__( 'Active Color', 'elementor' ),
454	'type' => Controls_Manager::COLOR,
455	'selectors' => [
456	'{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-toggle-icon i:before' => 'color: {{VALUE}};',
457	'{{WRAPPER}} .elementor-tab-title.elementor-active .elementor-toggle-icon svg' => 'fill: {{VALUE}};',
458	],
459	]
460	);
461
462	$this->add_responsive_control(
463	'icon_space',
464	[
465	'label' => esc_html__( 'Spacing', 'elementor' ),
466	'type' => Controls_Manager::SLIDER,
467	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
468	'range' => [
469	'px' => [
470	'max' => 100,
471	],
472	'em' => [
473	'max' => 10,
474	],
475	'rem' => [
476	'max' => 10,
477	],
478	],
479	'selectors' => [
480	'{{WRAPPER}} .elementor-toggle-icon.elementor-toggle-icon-left' => 'margin-right: {{SIZE}}{{UNIT}};',
481	'{{WRAPPER}} .elementor-toggle-icon.elementor-toggle-icon-right' => 'margin-left: {{SIZE}}{{UNIT}};',
482	],
483	]
484	);
485
486	$this->end_controls_section();
487
488	$this->start_controls_section(
489	'section_toggle_style_content',
490	[
491	'label' => esc_html__( 'Content', 'elementor' ),
492	'tab' => Controls_Manager::TAB_STYLE,
493	]
494	);
495
496	$this->add_control(
497	'content_background_color',
498	[
499	'label' => esc_html__( 'Background', 'elementor' ),
500	'type' => Controls_Manager::COLOR,
501	'selectors' => [
502	'{{WRAPPER}} .elementor-tab-content' => 'background-color: {{VALUE}};',
503	],
504	]
505	);
506
507	$this->add_control(
508	'content_color',
509	[
510	'label' => esc_html__( 'Color', 'elementor' ),
511	'type' => Controls_Manager::COLOR,
512	'selectors' => [
513	'{{WRAPPER}} .elementor-tab-content' => 'color: {{VALUE}};',
514	],
515	'global' => [
516	'default' => Global_Colors::COLOR_TEXT,
517	],
518	]
519	);
520
521	$this->add_group_control(
522	Group_Control_Typography::get_type(),
523	[
524	'name' => 'content_typography',
525	'selector' => '{{WRAPPER}} .elementor-tab-content',
526	'global' => [
527	'default' => Global_Typography::TYPOGRAPHY_TEXT,
528	],
529	]
530	);
531
532	$this->add_group_control(
533	Group_Control_Text_Shadow::get_type(),
534	[
535	'name' => 'content_shadow',
536	'selector' => '{{WRAPPER}} .elementor-tab-content',
537	]
538	);
539
540	$this->add_responsive_control(
541	'content_padding',
542	[
543	'label' => esc_html__( 'Padding', 'elementor' ),
544	'type' => Controls_Manager::DIMENSIONS,
545	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
546	'selectors' => [
547	'{{WRAPPER}} .elementor-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
548	],
549	]
550	);
551
552	$this->end_controls_section();
553	}
554
555	/**
556	* Render toggle widget output on the frontend.
557	*
558	* Written in PHP and used to generate the final HTML.
559	*
560	* @since 1.0.0
561	* @access protected
562	*/
563	protected function render() {
564	$settings = $this->get_settings_for_display();
565
566	$id_int = substr( $this->get_id_int(), 0, 3 );
567	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
568
569	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
570	// @todo: remove when deprecated
571	// added as bc in 2.6
572	// add old default
573	$settings['icon'] = 'fa fa-caret' . ( is_rtl() ? '-left' : '-right' );
574	$settings['icon_active'] = 'fa fa-caret-up';
575	$settings['icon_align'] = $this->get_settings( 'icon_align' );
576	}
577
578	$is_new = empty( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
579	$has_icon = ( ! $is_new \|\| ! empty( $settings['selected_icon']['value'] ) );
580
581	?>
582	<div class="elementor-toggle">
583	<?php
584	foreach ( $settings['tabs'] as $index => $item ) :
585	$tab_count = $index + 1;
586
587	$tab_title_setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $index );
588
589	$tab_content_setting_key = $this->get_repeater_setting_key( 'tab_content', 'tabs', $index );
590
591	$this->add_render_attribute( $tab_title_setting_key, [
592	'id' => 'elementor-tab-title-' . $id_int . $tab_count,
593	'class' => [ 'elementor-tab-title' ],
594	'data-tab' => $tab_count,
595	'role' => 'button',
596	'aria-controls' => 'elementor-tab-content-' . $id_int . $tab_count,
597	'aria-expanded' => 'false',
598	] );
599
600	$this->add_render_attribute( $tab_content_setting_key, [
601	'id' => 'elementor-tab-content-' . $id_int . $tab_count,
602	'class' => [ 'elementor-tab-content', 'elementor-clearfix' ],
603	'data-tab' => $tab_count,
604	'role' => 'region',
605	'aria-labelledby' => 'elementor-tab-title-' . $id_int . $tab_count,
606	] );
607
608	$this->add_inline_editing_attributes( $tab_content_setting_key, 'advanced' );
609	?>
610	<div class="elementor-toggle-item">
611	<<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?> <?php $this->print_render_attribute_string( $tab_title_setting_key ); ?>>
612	<?php if ( $has_icon ) : ?>
613	<span class="elementor-toggle-icon elementor-toggle-icon-<?php echo esc_attr( $settings['icon_align'] ); ?>" aria-hidden="true">
614	<?php
615	if ( $is_new \|\| $migrated ) { ?>
616	<span class="elementor-toggle-icon-closed"><?php Icons_Manager::render_icon( $settings['selected_icon'] ); ?></span>
617	<span class="elementor-toggle-icon-opened"><?php Icons_Manager::render_icon( $settings['selected_active_icon'], [ 'class' => 'elementor-toggle-icon-opened' ] ); ?></span>
618	<?php } else { ?>
619	<i class="elementor-toggle-icon-closed <?php echo esc_attr( $settings['icon'] ); ?>"></i>
620	<i class="elementor-toggle-icon-opened <?php echo esc_attr( $settings['icon_active'] ); ?>"></i>
621	<?php } ?>
622	</span>
623	<?php endif; ?>
624	<a class="elementor-toggle-title" tabindex="0"><?php $this->print_unescaped_setting( 'tab_title', 'tabs', $index ); ?></a>
625	</<?php Utils::print_validated_html_tag( $settings['title_html_tag'] ); ?>>
626
627	<div <?php $this->print_render_attribute_string( $tab_content_setting_key ); ?>><?php Utils::print_unescaped_internal_string( $this->parse_text_editor( $item['tab_content'] ) ); ?></div>
628	</div>
629	<?php endforeach; ?>
630	<?php
631	if ( isset( $settings['faq_schema'] ) && 'yes' === $settings['faq_schema'] ) {
632	$json = [
633	'@context' => 'https://schema.org',
634	'@type' => 'FAQPage',
635	'mainEntity' => [],
636	];
637
638	foreach ( $settings['tabs'] as $index => $item ) {
639	$json['mainEntity'][] = [
640	'@type' => 'Question',
641	'name' => wp_strip_all_tags( $item['tab_title'] ),
642	'acceptedAnswer' => [
643	'@type' => 'Answer',
644	'text' => $this->parse_text_editor( $item['tab_content'] ),
645	],
646	];
647	}
648	?>
649	<script type="application/ld+json"><?php echo wp_json_encode( $json ); ?></script>
650	<?php } ?>
651	</div>
652	<?php
653	}
654
655	/**
656	* Render toggle widget output in the editor.
657	*
658	* Written as a Backbone JavaScript template and used to generate the live preview.
659	*
660	* @since 2.9.0
661	* @access protected
662	*/
663	protected function content_template() {
664	?>
665	<div class="elementor-toggle">
666	<#
667	if ( settings.tabs ) {
668	var tabindex = view.getIDInt().toString().substr( 0, 3 ),
669	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, {}, 'i' , 'object' ),
670	iconActiveHTML = elementor.helpers.renderIcon( view, settings.selected_active_icon, {}, 'i' , 'object' ),
671	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
672	titleHTMLTag = elementor.helpers.validateHTMLTag( settings.title_html_tag );
673
674	_.each( settings.tabs, function( item, index ) {
675	var tabCount = index + 1,
676	tabTitleKey = view.getRepeaterSettingKey( 'tab_title', 'tabs', index ),
677	tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'tabs', index );
678
679	view.addRenderAttribute( tabTitleKey, {
680	'id': 'elementor-tab-title-' + tabindex + tabCount,
681	'class': [ 'elementor-tab-title' ],
682	'data-tab': tabCount,
683	'role': 'button',
684	'aria-controls': 'elementor-tab-content-' + tabindex + tabCount,
685	'aria-expanded': 'false',
686	} );
687
688	view.addRenderAttribute( tabContentKey, {
689	'id': 'elementor-tab-content-' + tabindex + tabCount,
690	'class': [ 'elementor-tab-content', 'elementor-clearfix' ],
691	'data-tab': tabCount,
692	'role': 'region',
693	'aria-labelledby': 'elementor-tab-title-' + tabindex + tabCount
694	} );
695
696	view.addInlineEditingAttributes( tabContentKey, 'advanced' );
697	#>
698	<div class="elementor-toggle-item">
699	<{{{ titleHTMLTag }}} {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
700	<# if ( settings.icon \|\| settings.selected_icon ) { #>
701	<span class="elementor-toggle-icon elementor-toggle-icon-{{ settings.icon_align }}" aria-hidden="true">
702	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
703	<span class="elementor-toggle-icon-closed">{{{ iconHTML.value }}}</span>
704	<span class="elementor-toggle-icon-opened">{{{ iconActiveHTML.value }}}</span>
705	<# } else { #>
706	<i class="elementor-toggle-icon-closed {{ settings.icon }}"></i>
707	<i class="elementor-toggle-icon-opened {{ settings.icon_active }}"></i>
708	<# } #>
709	</span>
710	<# } #>
711	<a class="elementor-toggle-title" tabindex="0">{{{ item.tab_title }}}</a>
712	</{{{ titleHTMLTag }}}>
713	<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>{{{ item.tab_content }}}</div>
714	</div>
715	<#
716	} );
717	} #>
718	</div>
719	<?php
720	}
721	}
722