TYPO3 Formidable - Use renderlet:ACCORDION

Using renderlet:ACCORDION

The ACCORDION is a container that allow to display a lot of content in a mimimal space, while remaining easily browsable.

The following examples demonstrate some possibilities of the renderlet:ACCORDION.

For the complete list of features of the accordion, have a look in the reference.

Note: The accordion will consider it's immediate dependancy (childs) as alternatively the handles and the contents of the accordion. In that way, a typical implementation is to define the childs of a renderlet:ACCORDION as a groupment of pairs of renderlet:BOX, first of the pair being the handle and the second the content of an accordion panel.

Simple implementation

Click me for panel #1

Box 1
Box 1
Box 1
Box 1
Box 1
Box 1
Box 1
Box 1
Box 1

Click me for panel #2

You can of course nest other renderlets

Click me for panel #3

Box 3
Box 3
Box 3

See code: renderlet:ACCORDION, simple implementation

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<formidable version="2.0.304">

<renderlet:BOX name="acc-toggle-2" html="Click me for panel #2"/>
				<renderlet:BOX name="acc-box-2">
					<childs>
						<renderlet:TEXT label="You can of course nest other renderlets">
							<data value="yes, that's cool" />
						</renderlet:TEXT>

<renderlet:BUTTON label="OK" />
					</childs>
				</renderlet:BOX>

<renderlet:BOX name="acc-toggle-3" html="Click me for panel #3" />
				<renderlet:BOX name="acc-box-3">
					<html><![CDATA[
						Box 3<br />Box 3<br />Box 3
					]]></html>
				</renderlet:BOX>

</childs>
		</renderlet:ACCORDION>
	</elements>

</formidable>

Same accordion, with custom CSS

Click me for panel #1

Box 1
Box 1
Box 1
Box 1
Box 1
Box 1
Box 1
Box 1
Box 1

Click me for panel #2

You can of course nest other renderlets

Click me for panel #3

Box 3
Box 3
Box 3

See code: renderlet:ACCORDION, styled

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<formidable version="2.0.304">

<control>
		<renderer:STANDARD>
			<style><![CDATA[

.accToggle, .accToggleActive {
					display: block;
					height: 30px; line-height: 30px;
					background-color: #a9d06a;
					border-bottom: 1px solid #cde99f;
					color: #000000;
					cursor: pointer;
				}
				
				.accToggleActive {
					background-color: #e0542f;
					color: #ffffff;
					border-bottom: 1px solid #f68263;
				}

.accToggleHorizontal, .accToggleActiveHorizontal {
					height: 300px;
					background-color: #a9d06a;
					border-right: 1px solid #cde99f;
					color: #000000;
					cursor: pointer;
				}

.accToggleActiveHorizontal {
					background-color: #e0542f;
					color: #ffffff;
					border-right: 1px solid #f68263;
				}

]]></style>
		</renderer:STANDARD>
	</control>
	<elements>

<renderlet:ACCORDION
			name="accordion"
			classToggle="accToggle"
			classToggleActive="accToggleActive"
			event="click"
			speed="9">
			<includeXml
				path="fileadmin/formidable/xml/howto-accordion.xml"
				xPath="/formidable/elements/renderlet[name=accordion]/childs/"
			/>
			<onload runat="client">
				<userobj>
					<php><![CDATA[
					
						return $this->aORenderlets["accordion"]->majixFirstTab();
					
					]]></php>
				</userobj>
			</onload>
		</renderlet:ACCORDION>

</elements>

</formidable>

Remote control buttons are added

Click me for panel #1

Box 1
Box 1
Box 1
Box 1
Box 1
Box 1
Box 1
Box 1
Box 1

Click me for panel #2

You can of course nest other renderlets

Click me for panel #3

Box 3
Box 3
Box 3

See code: renderlet:ACCORDION, styled + remote controls

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<formidable version="2.0.304">

<renderlet:BUTTON name="btn-open-tab3" label="Open tab 3">
			<onclick runat="client">
				<userobj>
					<php><![CDATA[
						
		return $this->aORenderlets["accordion"]->majixSetActiveTab("acc-toggle-3");