Zum Inhalt springen

Accordion mit Mask

Erstellt am 16. Oktober 2017 · 5 Antworten · letzte Antwort am 17. Oktober 2017

Tags: Fluid, JavaScript & AJAX, TYPO3 8, Frage

ds-adm ·

Hallo,

ich habe mir folgendes Accordion mit Mask gebaut:
ist soweit auch OK jedoch sobald ich den ersten Text schließe lässt sich der zweite nur kurz öffnen und klappt gleich wieder ein, danach ist Sendepause irgendwo is da noch ein Wurm aber wo?

 <f:if condition="{data_tx_businesstemplate_accordion}">
        <div id="accordion-{data.uid}" role="tablist" aria-multiselectable="true">
            <f:for each="{data_tx_businesstemplate_accordion}" as="data_item" iteration="iterator">
                <div class="card">
                    <f:if condition="{data_item.data.tx_businesstemplate_header}">
                        <div class="card-header" role="tab" id="heading-{iterator.index}">
                            <h5 class="mb-0">
                                <a class="<f:if condition='{iterator.isnotFirst}'>collapsed</f:if>" data-toggle="collapse" data-parent="#accordion-{data.uid}" href="#collapse-{iterator.index}" aria-expanded="<f:if condition='{iterator.isFirst}'><f:then>true</f:then><f:else>false</f:else></f:if>" aria-controls="collapse-{iterator.index}">
                                {data_item.data.tx_businesstemplate_header}
                                </a>
                            </h5>
                        </div>
                    </f:if>
                    <f:if condition="{data_item.data_tx_businesstemplate_textpic}">
                        <div id="collapse-{iterator.index}" class="collapse<f:if condition='{iterator.isFirst}'>show</f:if>" role="tabpanel" aria-labelledby="heading-{iterator.index}">
                            <div class="card-block">
                                <f:for each="{data_item.data_tx_businesstemplate_textpic}" as="content_item">
                                    <f:cObject typoscriptObjectPath="tt_content" data="{content_item.data}" table="tt_content" />
                                </f:for>
                            </div>
                        </div>
                    </f:if>
                </div>
            </f:for>
        </div>
    </f:if>

Danke für Hilfe

Teisinger ·

total falscher Ansatz - Typo3 bzw. Mask kann überhaupt kein Accordion, sondern dir nur eine HTML Ausgabe liefern - das heißt du musst schon in deinem JavaScript suchen. (oder wenn du moderner Unterwegs bist in deinem CSS 🙂 )

ds-adm ·

Hallo Teisinger,
in dem Punkt muss ich dir komplett wiedersprechen,
gerade deshalb verwendet mann ja Fluid und Mask um nicht alles mit JS zu machen und damit die Performance der Seite komplett in den Keller zu treiben.

Teisinger ·

NEIN - noch einmal Mask erzeugt dir im FE nur HTML genauso wie FLUID - da ist nix dynamisch - nix animiert. (Sollte ich damit echt falsch liegen - dann bin ich ja mal auf deine Lösung gespannt 🙂 )

Natürlich wäre es möglich (wie oben bereits erwähnt) ein accordion nur mit html und css zu machen. Mit JS geht es nur einfacher.

ds-adm ·

Die steht oben!!
Einmal funktionierts ja, nur wenn Du das Accordion Schließt, so lässt es sich nicht mehr öffnen.

Teisinger ·

tja werd ich nicht schlau draus - hast du denn ein Beispiel, das man anwenden kann - also testen? Irgendwas online?

Das würde sehr viel helfen.

Trotzdem weiß ich nicht wie das ohne css und ohne js funktionieren soll - könntest du das vielleicht bitte erklären. (wenn ich deinen code oben richtig verstehe - kann das nicht funktionieren <- ist schließlich nur statisches html, mehr nicht)