elementor / includes / widgets / toggle.php

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

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