TYPO3: Accordion mit gridelements

In Ergänzung zum Artikel Slider mit gridelements hier nun die Konfiguration zum Accordion mit der Ext. gridelements:

Die FlexForm-Konfiguration für die Accordion-Optionen. Ich setze das Accordion von jqueryui ein, daher stehen hier die Optionen für dieses jQuery Plugin:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
    <meta>
        <langDisable>1</langDisable>
    </meta>
    <sheets>
        <sDEF>
            <ROOT>
                <TCEforms>
                    <sheetTitle>Allgemein</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el type="array">
                    <active type="array">
                        <TCEforms type="array">
                            <label>Geöffnetes Element (0 = erstes, 1 = zweites, ..., -1 = letztes)</label>
                            <config type="array">
                                <type>input</type>
                                <size>1</size>
                                <max>3</max>
                            </config>
                        </TCEforms>
                    </active>
                </el>
            </ROOT>
        </sDEF>
        <advanced>
            <ROOT>
                <TCEforms>
                    <sheetTitle>Erweitert</sheetTitle>
                </TCEforms>
                <type>array</type>
                <el type="array">
                    <header type="array">
                        <TCEforms type="array">
                            <label>Überschrift Tag</label>
                            <config type="array">
                                <type>input</type>
                                <size>2</size>
                                <default>h3</default>
                            </config>
                        </TCEforms>
                    </header>
                    <collapsible type="array">
                        <TCEforms type="array">
                            <label>Alle Elemente sind einklappbar</label>
                            <config type="array">
                                <type>check</type>
                                <default>1</default>
                            </config>
                        </TCEforms>
                    </collapsible>
                    <animate type="array">
                        <TCEforms type="array">
                            <label>Animation (Name des Effektes oder Dauer in Millisekunden)</label>
                            <config type="array">
                                <type>input</type>
                                <size>40</size>
                            </config>
                        </TCEforms>
                    </animate>
                    <heightStyle type="array">
                        <TCEforms type="array">
                            <label>Verhalten Höhe</label>
                            <config type="array">
                                <type>select</type>
                                <items type="array">
                                <numIndex index="0" type="array">
                                    <numIndex index="0">Keine Anpassung</numIndex>
                                    <numIndex index="1">content</numIndex>
                                </numIndex>
                                <numIndex index="1" type="array">
                                    <numIndex index="0">Orientierung an höchsten Element</numIndex>
                                    <numIndex index="1">auto</numIndex>
                                </numIndex>
                                </items>
                            </config>
                        </TCEforms>
                    </heightStyle>
                    <event type="array">
                        <TCEforms type="array">
                            <label>Aufklappen bei</label>
                            <config type="array">
                                <type>select</type>
                                <items type="array">
                                <numIndex index="0" type="array">
                                    <numIndex index="0">Klick</numIndex>
                                    <numIndex index="1">click</numIndex>
                                </numIndex>
                                <numIndex index="1" type="array">
                                    <numIndex index="0">Mouseover</numIndex>
                                    <numIndex index="1">mouseover</numIndex>
                                </numIndex>
                                </items>
                            </config>
                        </TCEforms>
                    </event>
                </el>
            </ROOT>
        </advanced>
    </sheets>
</T3DataStructure>

HTML-Ausgabe dieses Raster-Elementes:

TS Setup

tt_content.gridelements_pi1 {
    20.10.setup {
        13 < lib.gridelements.defaultGridSetup
        13 {
            columns {
                default.renderObj.wrap = <li class="accordionItem">|</li>
            }
            wrap.stdWrap.cObject = COA
            wrap.stdWrap.cObject {
                wrap = <div class="accordion">|</div>
                10 = COA
                10 {
                    10 = COA
                    10 {
                        wrap = <div class="options">{|}</div>
                        110 = TEXT
                        110.value = "active":false,
                        110.override.wrap = "active":|,
                        110.override.field = flexform_active
                        110.override.if.value = -2
                        110.override.if.isGreaterThan.field = flexform_active
                        120 = TEXT
                        120.wrap = "header":"|",
                        120.field = flexform_header
                        130 = TEXT
                        130.value = "collapsible":true,
                        130.if.isTrue.field = flexform_collapsible
                        140 = TEXT
                        140.wrap = "animate":|,
                        140.field = flexform_animate
                        140.required = 1
                        140.override.wrap = "|"
                        140.override.field = flexform_animate
                        140.override.if.value = 1000000
                        140.override.if.isGreaterThan.field = flexform_animate
                        150 = TEXT
                        150.wrap = "heightStyle":"|",
                        150.field = flexform_heightStyle
                        160 = TEXT
                        160.wrap = "event":"|"
                        160.field = flexform_event
                    }
                    20 = TEXT
                    20.value = <ul class="accordionContents">|</ul>
                }
            }
        }
    }
}

Der JavaScript-Code, um die Optionen an den Slider weiterzugeben:

$('.accordion').each(function(){
    options = $(this).find('.options').text();
    if(options) {
        options = $.parseJSON(options);
    } else {
        options = [];
    }
    $(this).find('.accordionContents').accordion(options);
});

10 Kommentare zu “TYPO3: Accordion mit gridelements”

  1. Ich habe das scheinbar schon richtig eingepflegt, allerdings schafft das FE kein Akkordion(die zwei Elemente sind unter dem Slider):

    http://typo362.deutschenbaur.eu/index.php?id=2

    natürlich versuche ich die beiden javaScripts in einer Datei auszugeben – im Quelltext ende in der custom.js

    Ich denke, es ist doch alles richtig?

    gruß und danke für eine tollen tuts.. ;)

  2. Hi Alex,
    für das Accordion kann ich auf deiner Webseite keinen JavaScript Code finden. Außerdem bindest du die jQuery Library zweimal ein, das könnte auch zu Problemen führen.
    Gruß Sven

  3. Hi,

    ich habs wieder rausgenommen. sorry. Aber funktioniert das bei dir denn so wie oben beschrieben?

    Ich habe momentan das tinyaccordion – allerdings als extension – eingebunden. Allerdings möchte ich das schon noch mit AnythingSlider machen, wenn ich den eh schon eingebunden habe..

    2 Jquery sollten jetzt auch wieder weg sein…

    schönen Gruß – alex

  4. Hi Alex,
    schau dir mal den Quellcode und JavaScript an. Ich kann z.B. nicht sehen, dass es auf der Seite irgendwelche Inhalte gibt, die mit Klasse „accordion“ oder ähnlich versehen sind – das JavaScript für die Accordion-Funktion findet also gar keine Inhalte, die es als Accordion behandeln könnte.
    Ich glaube auch nicht, dass AnythingSlider Accordions erzeugen kann.
    Gruß Sven

  5. Hi Alex,
    du solltest Firebug bzw. vergleichbare Browsertools einsetzen. Dann hättest du den JavaScript-Fehler
    $(...).find(...).accordion is not a function
    gesehen :)

  6. Hallo Sven, und danke für den guten Post. Habe das Ganze mir mal angeschaut und nun auch im Einsatz. Ist wirklich die eleganteste Lösung, wenn man noch alle unterschiedlichen Inhaltselemente nutzen will.

    Das Options-Div sollte man gleich auch noch mit style=“display:none“; versehen, so dass es nicht kurz aufflackert, wenn die Seite geladen wird.

    Des Weiteren lohnt es sich m.E. auch, mit fontawesome o.ä. zu arbeiten und so die Config noch für die Icons reinzunehmen. Z.B.:

    170 = COA
    170 {
    wrap = „icons“: {|}
    10 = TEXT
    10 {
    value = „fa fa-plus-square“
    wrap = „header“:|,
    }
    20 = TEXT
    20 {
    value = „fa fa-minus-square“
    wrap = „activeHeader“:|
    }
    }

    Viele Grüße, Björn

  7. Hallo Björn,
    klar, das Options-Div sollte versteckt werden, allerdings nicht unbedingt per Inline-CSS, sondern besser in einer ausgelagerten CSS Datei.
    Gute Idee, der Einsatz von fontawesome. Allerdings haben meine Kunden oft genaue Vorstellungen davon, wie die Icons aussehen sollen und schicken mir ihre eigenen. Außerdem ist die Schriftdatei von fontawesome 50 bis 110 kb groß.
    Viele Grüße
    Sven

  8. Hi,
    bin gerade dabei, das Accordion wie oben beschrieben, einzubinden. Flexform und GridLayout habe ich eingebunden und das funktioniert m.E. auch. Im Frontend erhalte ich über der ersten Überschrift aber eine Zeile mit den Optionen. Dort steht
    {„active“:0,“header“:““,“collapsible“:true,“heightStyle“:“auto“,“event“:“click“}

    Wenn ich in den Source-Code schaue, dann ist die Struktur wie folgt

    {„active“:0,“header“:““,“collapsible“:true,“heightStyle“:“auto“,“event“:“click“}

    Ok, dann dachte ich, dass vielleicht das JavaScript nicht richtig eingebunden ist.
    Dafür habe ich bislang aber nur die Möglichkeit gefunden, in der Datei page.typoscript mittels

    page.headerData {
    10 = TEXT
    10.value (

    )
    }

    das JavaScript eingebunden. Mmmh, also im SourceCode der Seite wird das im Headerbereich auch so ausgegeben, nur leider startet das Accordeon nicht. Eine Idee für mich?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.