elementor / includes / widgets / toggle.php

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

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