Accordions verschachteln
Manchmal reicht ein einzelnes Accordion nicht aus um die gewünschte übersichtliche Struktur zu schaffen. In diesem Fall können Sie einfach ein weiteres Accordion im Accordion platzieren.
RRZE Elements | Verschachteln von Accordeons
Achten Sie bei verschachtelten Accordions auf die Überschriften-Hierarchie!
Beginnt das äußere Accordion mit der Überschriftenebene 2 (hstart="2"
), müssen die inneren Accordions die Ebene 3 bekommen (hstart="3"
).
Verschachtelte Accordion’s
Accordionfarben
Alle Accordionfarben im Überblick
Titel Accordion 1
Hier der Text
Titel Accordion 2
Hier der Text
Titel Accordion 3
Hier der Text
Titel Accordion 4
Hier der Text
Titel Accordion 5
Hier der Text
Titel Accordion 6
Hier der Text
Zweites Feld
Inhalt 2. Feld
Übersicht des Codes:
Beginnen Sie, indem Sie ein ganz normales Accordion erstellen mit
[collapsibles hstart=""]
.
Fügen Sie dann das innere Accordion in einem der Fächer ein mithilfe des Codes
[accordion hstart=""]
.
Die Accordionabschnitte heißen hier anstelle von
[collapse title="" name=""]
[accordion-item]
.
Also wie folgt:
[collapsibles hstart="2"]
[collapse title="Äußeres Accordionfach" name="äußeres Accordionfach"]
[accordion hstart="3"]
[accordion-item title="inneres Accordionfach 1" name="inneresfach1"]
[/accordion-item]
[/accordion]
[/collapse]
[/collapsibles]
Genutzer Code im Beispiel:
[collapsibles hstart="3"]
[collapse title="Accordionfarben" name="accfarben1"]
Alle Accordionfarben im Überblick
[accordion hstart="4"]
[accordion-item title="Titel Accordion 1" color="phil" name="sprungmarke1"]
Hier der Text
[/accordion-item]
[accordion-item title="Titel Accordion 2" color="med" name="sprungmarke2"]
Hier der Text
[/accordion-item]
[accordion-item title="Titel Accordion 3" color="nat" name="sprungmarke2"]
Hier der Text
[/accordion-item]
[accordion-item title="Titel Accordion 4" color="rw" name="sprungmarke2"]
Hier der Text
[/accordion-item]
[accordion-item title="Titel Accordion 5" color="tf" name="sprungmarke2"]
Hier der Text
[/accordion-item]
[accordion-item title="Titel Accordion 6" color="fau" name="sprungmarke2"]
Hier der Text
[/accordion-item]
[/accordion]
[/collapse]
[collapse title="Zweites Feld" name="accfeld2"]
Inhalt 2. Feld
[/collapse]
[/collapsibles]