ot_typo3/ot_templating/Resources/Private/Templates/Content/Faq.html

<f:comment><!-- Widget flux par Site N'Go: FAQ --></f:comment>

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}

<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

    <f:layout name="{settings.template}/CustomContent"/>

    <f:section name="Configuration">
        <flux:form id="Faq"
                   label="{f:translate(key: 'faq')}"
                   description="{f:translate(key: 'make_your_faq_section')}"
                   extensionName="OtTemplating"
        >
            <flux:form.option.group value="ot_widgets" />
            <flux:form.option.icon value="EXT:ot_templating/Resources/Public/Icons/opentalent-144x144.png" />

            <flux:form.section name="faq">
                <flux:form.object name="item" label="{f:translate(key: 'question')}">
                    <flux:field.input name="question" label="{f:translate(key: 'question')}"/>
                    <flux:field.text name="reponse" label="{f:translate(key: 'answer')}" defaultExtras="richtext[]:rte_transform[mode=ts_css]"/>
                    <flux:field.checkbox name="open" label="{f:translate(key: 'unfolded')} ?"/>
                </flux:form.object>
            </flux:form.section>
        </flux:form>
    </f:section>

    <f:section name="Preview">
        <table style="width: 100%;" class="table table-condensed table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>{f:translate(key: 'question')}Question</th>
                <th>{f:translate(key: 'answer')}Réponse</th>
            </tr>
            </thead>
            <tbody>
            <f:for each="{faq}" as="element" iteration="iteration">
                <f:for each="{element}" key="elementType" as="elementData">
                    <tr valign="middle">
                        <td style="vertical-align: middle;">{iteration.cycle}</td>
                        <td style="vertical-align: middle;">{elementData.question}</td>
                        <td style="vertical-align: middle;"><f:format.raw>{elementData.reponse}</f:format.raw></td>
                    </tr>
                </f:for>
            </f:for>
            </tbody>
        </table>
    </f:section>

    <f:section name="Main">

        <div class="faq">
            <f:for each="{faq}" as="element" iteration="iteration">
                <f:for each="{element}" key="elementType" as="elementData">
                    <div class="full-width faq-item {f:if(condition:'{iteration.isOdd}',then:'highlight')}">
                        <div class="container">
                            <div class="row">
                                <div class="edito {f:if(condition:'{elementData.open}',else:'panel-close')}">
                                    <h3>{elementData.question}</h3>
                                    <div class="content collapse {f:if(condition:'{elementData.open}',then:'show')}">
                                        <f:format.html>{elementData.reponse}</f:format.html>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </f:for>
            </f:for>
        </div>


    </f:section>

</div>