gistfile1.txt

{namespace    v=FluidTYPO3\Vhs\ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace  nim=NIM\Nimelements\ViewHelpers}
<f:layout name="Content"/>

<f:section name="Configuration">
	<flux:form
			options="{group: 'zusätzliche Inhaltselemente', icon: '{f:uri.resource(path: \'icons/accordeon.png\')}', Fluidcontent: {sorting: 101}}"
			id="accordeon" label="Accordeon">


		<flux:form.section name="elements" label="{f:translate(key: 'accordeon.elements')}">
			<flux:field.none name="id" label="id"/>
			<flux:form.object name="element" label="{f:translate(key: 'accordeon.element')}">
				<flux:field.input name="title" label="{f:translate(key: 'accordeon.title')}"/>
			</flux:form.object>
		</flux:form.section>


		<flux:grid>
			<f:for each="{elements}" as="obj" iteration="iteration">
				<flux:grid.row>
					<flux:grid.column name="{obj.element.id}" label="{obj.element.title}"/>
				</flux:grid.row>
			</f:for>
		</flux:grid>

		<flux:field.checkbox name="mobile" label="{f:translate(key: 'mobile')}" default="1"/>
		<flux:field.checkbox name="tablet" label="{f:translate(key: 'tablet')}" default="1"/>
		<flux:field.checkbox name="desktop" label="{f:translate(key: 'desktop')}" default="1"/>
	</flux:form>
</f:section>

<f:section name="Preview">
	<b>Accordeon: {title}</b>
	<flux:widget.grid/>
	<f:render partial="SelectiveShowPreview" arguments="{_all}"/>
</f:section>

<f:section name="Main">
	<nim:selectiveShow mobile="{mobile}" tablet="{tablet}" desktop="{desktop}">
		<div class="nim-accordeon">
			<f:for each="{elements}" as="obj" iteration="iteration">
				<div class="nim-accordeon-group">
					<div class="nim-accordeon-heading" data-index="{iteration.cycle}"><span class="icon"></span>
						{obj.element.title}
					</div>
					<div class="nim-accordeon-content" data-index="{iteration.cycle}">
						<flux:content.render area="column{iteration.cycle}"/>
					</div>
				</div>
			</f:for>

		</div>
	</nim:selectiveShow>
</f:section>