Erstellung eines CE-Elements "Akkordeon" mit der TYPO3-Extension »Mask«

Eine kurze Beschreibung, wie man mit der Ext. MASK ein Akkordeon zusammenstellen kann. Voraussetzung ist natürlich, dass die Extension »Mask« geladen und als statisches Objekt im Template geladen wird. jQuery ist natürlich ein Muss.

Um die jQuery-accordion-Funktion nutzen zu können, solltet Ihr noch am Ende der Seite das JQ-UserInterface einbinden ( //api.jqueryui.com/accordion/ ):

   page.includeJSFooter.jqueryui = //code.jquery.com/ui/1.12.1/jquery-ui.js

Es folgen zuerst drei Screenshots bzgl. Mask und der Seite mit dem Akkordeon:

mask = Akkordeon Element

Erstellung für den Akkordeon-Content

Mask-Akkordeon in Seite einfügen

Mask-Akkordeon in Seite einfügen (Backend-Ansicht)

Akkordeon-CE geöffnet

Akkordeon-CE geöffnet

Die Fluidvorlage von Mask

Mask erstellt ja nur eine einfache Fluidvorlage, die natürlich angepasst werden muss.

So sieht der Rohling aus Mask aus:

<f:if condition="{data.tx_mask_accordion_ce}">
<f:for each="{data.tx_mask_accordion_ce}" as="data_item">
<f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item.uid}</f:cObject><br />
</f:for>
</f:if>

 

und hier nun die modifizierte und fertige Fluid-Vorlage für das Akkordeon:

<f:if condition="{data.tx_mask_accordion_ce}">

   <script type="text/javascript">
      $(function() {
         $( ".ge-accordion{data.uid}" ).accordion({
            header: '> .fsc > .ce-header',
            collapsible: true,
            autoHeight: false,
            heightStyle: 'content',
            active: 0
         });
      });
   </script>

   <div id="c{data.uid}" class="ge-accordion ge-accordion{data.uid}" data-role="collapsible-set">
      <f:for each="{data.tx_mask_accordion_ce}" as="data_item">
            <f:cObject typoscriptObjectPath="lib.tx_mask.content">{data_item.uid}</f:cObject>
      </f:for>
   </div>

</f:if>

 

Ich hoffe, dass Euch diese Doku. ein wenig weiter hilft? Kommentar dazu entweder auf Facebook oder per Mail.