Skip to main content

🔽 Accordion

Accordion mit MODX 3.1.2, pdoTools, Bootstrap 5.3.8 (Spacelab) und Galerielink

📌 Überblick

Dieses Accordion:

  • holt Unterseiten per pdoTools (pdoResources über pdoPage)
  • zeigt den Inhalt der Unterseiten im Accordion
  • kann per Parameter gesteuert werden:
    • open → wie viele Einträge beim Laden geöffnet sind
    • limit → Inhalt auf X Wörter kürzen (optional)
    • rows → wie viele Unterseiten geladen werden
  • zeigt bei vorhandener Galerie-TV (tvGalleryPfad) einen Button „Zur Bildergalerie“
  • zeigt bei gesetzter Download-TV (tvDownloadPfad) automatisch einen Download-Button
  • zeigt bei gesetztem Datum (tvStartdatum) automatisch einen Countdown unter dem Inhalt

🧩 1. Chunk: modxAccordion

Dieser Chunk ist die „Komponente“, die du im Content einbindest.

[[!pdoPage:default=`Keine Einträge vorhanden`?
    &context=`web`
    &element=`pdoResources`
    &parents=`[[*id]]`
    &depth=`1`

    <!-- Anzahl der Ressourcen (Accordion-Items) -->
    &limit=`[[+rows]]`

    &tpl=`modxAccordionTpl`
    &tplWrapper=`modxAccordionWrapper`
    &includeContent=`1`
    &processTVs=`1`
    &tvPrefix=``
    &showUnpublished=`0`
    &showHidden=`0`
    &sortby=`menuindex`
    &sortdir=`ASC`

    <!-- TVs für Galerie-, Download- und Kalenderinfos -->
    &includeTVs=`tvGalleryPfad,tvDownloadPfad,tvStartdatum`

    <!-- Parameter aus dem Chunk-Aufruf weiterreichen -->
    &open=`[[+open]]`
    &wordLimit=`[[+limit]]`
]]

🔎 Erklärung:

  • &parents=[[*id]] → lädt die direkten Unterseiten der aktuellen Seite.
  • &limit=[[+rows]] → Anzahl der geladenen Unterseiten (wird vollständig durch den Aufruf gesteuert).
  • &includeTVs=... → lädt TVs für Galerie (tvGalleryPfad), Downloads (tvDownloadPfad) und Countdown (tvStartdatum).
  • &open=[[+open]] → bestimmt, wie viele Accordion-Einträge beim Laden geöffnet sind (kommt direkt aus dem Aufruf).
  • &wordLimit=[[+limit]] → legt die maximale Wortanzahl im Accordion-Text fest.

🧩 2. Chunk: modxAccordionWrapper

Der Wrapper erzeugt das äußere <div class="accordion">.

<div class="accordion" id="modxAccordion-[[*id]]">
    [[+output]]
</div>
  • [[*id]] sorgt für eine eindeutige ID pro Seite.
  • [[+output]] enthält alle generierten Accordion-Items.

🧩 3. Chunk: modxAccordionTpl

(Accordion-Item mit Galerie- und Download-Link)

<div class="accordion-item">
    <h2 class="accordion-header" id="heading-[[+id]]">

        <button class="accordion-button [[+idx:lte=`[[+open:default=`0`]]`:then=``:else=`collapsed`]]"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapse-[[+id]]"
                aria-expanded="[[+idx:lte=`[[+open:default=`0`]]`:then=`true`:else=`false`]]"
                aria-controls="collapse-[[+id]]">
            [[+pagetitle]]
        </button>

    </h2>

    <div id="collapse-[[+id]]"
         class="accordion-collapse collapse [[+idx:lte=`[[+open:default=`0`]]`:then=`show`]]"
         role="region"
         aria-labelledby="heading-[[+id]]"
         data-bs-parent="#modxAccordion-[[*id]]">

        <div class="accordion-body">

            [[+tvGalleryPfad:notempty=`
                <p class="mb-3">
                    <a href="[[~[[+id]]]]" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-images"></i> Zur Bildergalerie
                    </a>
                </p>
            `]]

            [[+tvDownloadPfad:notempty=`
                <p class="mb-3">
                    <a href="[[~[[+id]]]]#downloads" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-download"></i> Downloads
                    </a>
                </p>
            `]]

            [[+wordLimit:notempty=`
                [[+content:limitWholeWords=`[[+wordLimit]]`]]
            `:empty=`
                [[+content]]
            `]]

            [[!fcCountdownRow? &date=`[[+tvStartdatum]]` &minYear=`2025` &align=`right` &tpl=`fcCountdownRowTpl`]]

        </div>
    </div>
</div>

🔎 Erklärung der wichtigen Platzhalter / Logik:

  • [[+id]] → Ressourcen-ID, macht die Accordion-IDs eindeutig.
  • [[+pagetitle]] → Titel des Accordion-Eintrags.
  • [[+idx]] → Laufende Nummer des Eintrags (1, 2, 3, …); wird für die Öffnungslogik (idx <= open) verwendet.
  • [[+open]] → Wert aus &open= im Aufruf; steuert, wie viele Einträge beim Laden geöffnet sind (Standard: 0, über :default= im Template).
  • [[+content]] → vollständiger Content der Unterseite.
  • [[+wordLimit]] → Wortlimit aus &limit= im Aufruf; begrenzt den Inhalt, falls gesetzt.
  • [[+tvGalleryPfad]] → TV, die anzeigt, ob eine Galerie vorhanden ist; steuert die Ausgabe des Buttons „Zur Bildergalerie“.
  • [[+tvDownloadPfad]] → TV, die anzeigt, ob Downloads vorhanden sind; steuert die Ausgabe des „Downloads“-Buttons.
  • [[+tvStartdatum]] → Datum für den Countdown; wird an fcCountdownRow übergeben.
  • [[~[[+id]]]] → Link zur Detailseite der Ressource (z.B. zur Galerie oder Downloadliste).
  • [[!fcCountdownRow? … ]] → Snippet, das einen Countdown (z.B. zu einem Ereignis) ausgibt.

💡 Accordion-Öffnungslogik

Ein Eintrag wird geöffnet, wenn:

idx <= open

Beispiele:

  • open=0 → idx <= 0 → kein Eintrag offen → alles zu
  • open=1 → idx <= 1 → nur der erste Eintrag ist offen
  • open=3 → idx <= 3 → die ersten drei Einträge sind offen
  • open=999 → alle Einträge sind offen (sofern weniger vorhanden)

💡 Inhalt

  • Wenn wordLimit gesetzt ist → limitWholeWords kürzt den Inhalt auf die angegebene Wortanzahl (HTML bleibt grundsätzlich erhalten, kann aber theoretisch unsauber abgeschnitten werden).
  • Wenn wordLimit leer ist → es wird der komplette Content ausgegeben (inklusive aller Bilder).
  • Der Button „Zur Bildergalerie“ wird nur ausgegeben, wenn tvGalleryPfad gefüllt ist.
  • Der Link zeigt auf die jeweilige Unterseite ([[~[[+id]]]]), auf der die Galerie eingebunden ist.
  • Der Button „Downloads“ wird nur ausgegeben, wenn tvDownloadPfad gefüllt ist.
  • Der Link führt zur Download-Sektion der jeweiligen Unterseite ([[~[[+id]]]]#downloads).

💡 Countdown

  • Wird ausgegeben, wenn tvStartdatum gesetzt ist.
  • Der Countdown wird über fcCountdownRow erzeugt und unterhalb des Inhalts angezeigt.

🧪 4. Aufrufe im Content

4.1 Einfaches Accordion, alles zu, kompletter Content

[[$modxAccordion]]
  • open → Standard 0 → alle Einträge zu.
  • limit → leer → kompletter Content.
  • rows → nicht gesetzt → es gilt der Standardwert von pdoPage (z.B. 10 oder 20, je nach Konfiguration).

4.2 Nur der erste Eintrag offen, kompletter Content

[[!$modxAccordion? &open=`1`]]
  • Eintrag 1 offen, Rest zu.
  • Voller Inhalt.

4.3 Erste drei Einträge offen, Inhalt auf 200 Wörter gekürzt

[[!$modxAccordion? &open=`3` &limit=`200`]]
  • Einträge 1–3 offen.
  • Inhalt auf 200 Wörter pro Eintrag begrenzt.

4.4 Maximal 10 Unterseiten, erster offen, viel Inhalt

[[!$modxAccordion? &rows=`10` &open=`1` &limit=`5000`:process=`1`]]
  • Maximal 10 Unterseiten im Accordion.
  • Erster Eintrag ist beim Laden offen.
  • Inhalt auf 5000 Wörter begrenzt (praktisch Volltext).
  • Durch :process=1 werden MODX-Tags im Content (z.B. [[$ZufallsMedium]]) korrekt ausgeführt.

✅ Voraussetzungen

  • pdoTools ist installiert (pdoPage, pdoResources).
  • TV tvGalleryPfad existiert und ist den Unterseiten zugewiesen (für den Galerie-Link).
  • TV tvDownloadPfad existiert und ist den Unterseiten zugewiesen (für den Download-Button).
  • TV tvStartdatum existiert und ist den Unterseiten zugewiesen (für den Countdown).
  • Bootstrap 5.3.8 (Spacelab) ist im Template eingebunden:
    • CSS (Bootswatch Spacelab)
    • JS (Bootstrap-Bundle, inkl. Collapse-Funktion)
  • Das Template der Seite gibt [[*content]] aus, damit der Chunk-Aufruf im Content angezeigt wird.

Optional: Accordion nur anzeigen, wenn eine TV (Radio Options: ja||nein) aktiv ist

[[*tvAccordion:is=`ja`:then=`
    [[!$modxAccordion? &rows=`10` &open=`1` &limit=`5000`:process=`1`]]
`:else=``]]
Back to top