TYPO3 Mask CE Accordion

Question

I try to build a Mask CE element, an accordion.

As you can see here: http://www.pizzaworkshop.nl/index.php?id=3 it is partly working. Though I need some help to get this right (by lack of some good samples on the net).

this is what I have as fluid template (I,m using foundation6 :) So all parts seems to be there but how to get the "repetition' in the html?

    <f:if condition="{data.tx_mask_planned_header}">
   <f:format.nl2br>{data.tx_mask_planned_header}</f:format.nl2br>
</f:if>

<ul class="accordion" data-accordion>  

  <li class="accordion-item" data-accordion-item>
     <a href="#" class="accordion-title"><f:if condition="{data.tx_mask_workshop_gepland}">
  <f:for each="{data.tx_mask_workshop_gepland}" as="data_item">
    <f:if condition="{data_item.tx_mask_datum_workshop}">
    <f:format.date format="d.m.Y">{data_item.tx_mask_datum_workshop}</f:format.date>
    </f:if>  
    <f:switch expression="{data_item.tx_mask_soort_workshop}">
       <f:case value="1">Pizza -Fun Workshop</f:case>
       <f:case value="2">Pizza - Master Workshop</f:case>
       <f:case value="3">Pizza - Midsummer Pizza</f:case>
   </f:switch>
</a>
    <div class="accordion-content" data-tab-content>
       <h4>
         <f:if condition="{data_item.tx_mask_workshop_state}">
    <f:switch expression="{data_item.tx_mask_workshop_state}">
      <f:case value="1"><b>Nieuwe workshop!<b/></f:case>
      <f:case value="2">Deze workshop is vol!</f:case>
      <f:case value="3">Nog enkele plaatsen beschikbaar</f:case>
    </f:switch>
    </f:if>                
       </h4> 
      <div class="callout">
      <f:if condition="{data_item.tx_mask_workshop_info}">
        <f:format.html parseFuncTSPath="lib.parseFunc_RTE">{data_item.tx_mask_workshop_info}</f:format.html>
    </f:if>

      <button class="button-red"> <f:if condition="{data_item.tx_mask_workshop_form_link}">
        <f:link.page pageUid="{data_item.tx_mask_workshop_form_link}"></f:link.page>
    </f:if>
   </button>
      </div>
    </div>
      </li>  
</f:for>
</ul>
</f:if>

Answer 1

I have an accordion, where the accordion-content are own CEs. So my rendering consists of:

<ul class="accordion" data-accordion> 
    <f:for each="{data.tx_mask_accordionitems}" as="accordion_item">
        <f:cObject typoscriptObjectPath="lib.tx_mask.content">{accordion_item.uid}</f:cObject>
    </f:for>
</ul>

our mask definitions ...
... for Slider (only slider_elements allowed):

... the slider element:

... tabs (multiple CEs as subelements allowed):

your solution might differ if your CE definition might vary. please add the mask definition of your CE.