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>

Bernd Wilke πφ · Accepted Answer · 2017-05-18T07:05:40.230

2

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.

edited May 18 '17 at 07:05

answered May 18 '17 at 05:52

Bernd Wilke πφ

10,390
1
19
38

So I create one accordion Mask CE which is more or less the "wrap" and a separate Mask CE accordion Content CE, with the accordion content ? which is in youre case {accordion_item.uid} Is this approach also usable for lets say a slider or tabs? Great, this is an huge step forward (not only for mankind) :) Wiechert – mr_typo3 May 18 '17 at 06:35
I added our definition for slider and tabs. For slider, only slider_elements are possible as subelements as they need to be very specific. For tabs multiple CEs as subelements are possible. – Bernd Wilke πφ May 18 '17 at 07:08
Great :) This is what I needed. Now I can speed things up (I hope :). Thanks. Wiechert – mr_typo3 May 18 '17 at 07:13
Aaaah I thought I had it but I still do not get it right. I made a paste here: https://pastebin.com/KQTTPy01 and this is how it looks live now the first one is my first attempt the second one is the one which I pasted: http://www.pizzaworkshop.nl/index.php?id=3 – mr_typo3 May 18 '17 at 09:52
I can't inspect it in deep, but I have the feeling that you build a wrong html-markup (just one li-tag around(!) the f:for each instead of one li in every f:for loop). try to simplify the code by using partials and sections – Bernd Wilke πφ May 18 '17 at 11:00
I've got it! :) Thanks for the help. – mr_typo3 May 18 '17 at 13:10

TYPO3 Mask CE Accordion

1 Answers1