mask_accordion

<!-- a header above the accordion -->
<f:if condition="{data.tx_mask_planned_header}">
   <f:format.nl2br>{data.tx_mask_planned_header}</f:format.nl2br>
</f:if>

<!-- the foundation 6 accordion -->
<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>
   <!-- this is where the content goes -->
    <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="panel">
      <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>
      <!-- wow a nice button but not with a link yet ??  -->
      <button class="button"><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>
</ul>
<!-- end of the first tab of the accordion ? -->
</f:for>
</f:if>
<!-- and many more tabs to come ? Not!! why not? -->