[Frage] Accordion mit Mask TYPO3-Version: 8.7.7

  • ds-adm ds-adm
    T3PO
    0 x
    16 Beiträge
    0 Hilfreiche Beiträge
    16. 10. 2017, 14:55

    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?

    [code]<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>

    [/code]

    Danke für Hilfe


  • 1
  • Teisinger Teisinger
    Jedi-Meister
    0 x
    331 Beiträge
    23 Hilfreiche Beiträge
    16. 10. 2017, 20:39

    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 :) )

    https://github.com/groundstack-org

  • ds-adm ds-adm
    T3PO
    0 x
    16 Beiträge
    0 Hilfreiche Beiträge
    17. 10. 2017, 11:14

    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 Teisinger
    Jedi-Meister
    0 x
    331 Beiträge
    23 Hilfreiche Beiträge
    17. 10. 2017, 12:31

    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.

    https://github.com/groundstack-org

  • ds-adm ds-adm
    T3PO
    0 x
    16 Beiträge
    0 Hilfreiche Beiträge
    17. 10. 2017, 18:05

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

  • Teisinger Teisinger
    Jedi-Meister
    0 x
    331 Beiträge
    23 Hilfreiche Beiträge
    17. 10. 2017, 20:06

    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)

    https://github.com/groundstack-org

  • 1