elementor / includes / widgets / accordion.php

accordion.php in Elementor Website Builder – more than just a page builder 3.28.0-dev2, at includes/widgets/accordion.php

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