Zum Inhalt

Accordion

Überblick

Der Accordion-Block stellt ein Bootstrap‑Accordion als LiveCanvas‑Block bereit.
Im Editor lassen sich Titel, Reihenfolge und Optionen komfortabel im Panel steuern, im Frontend wird nur das optimierte Markup ausgegeben.

Der Block wird im LiveCanvas‑Panel unter TWtheme → Accordion angeboten.

Block-Struktur

Ein Accordion besteht aus einem Wrapper <div class="accordion" id="..."> mit dem Helper‑Attribut lc-helper="twtheme-accordion". Darin liegen mehrere .accordion-item-Elemente, die jeweils aus Header und Collapse‑Bereich aufgebaut sind. Der Header verwendet das im Panel ausgewählte Tag (h2, h3, h4 oder div) und enthält den klickbaren .accordion-button. Im Collapse‑Bereich liegt die eigentliche Inhaltsfläche .accordion-body, die wieder normale lc-block-Inhalte aufnehmen kann.

Sobald das Panel aktiv genutzt wird, vergibt der Block automatisch eindeutige IDs im Format accordion-..., damit data-bs-target, aria-controls und aria-labelledby konsistent bleiben.

Einstellungen im LiveCanvas-Panel

Die Accordion-ID definiert die technische Basis für alle IDs und ARIA‑Bezüge innerhalb des Blocks. Mit dem Feld Header-Tag steuerst du die semantische Ebene der Überschriften. Über Mehrere Items gleichzeitig öffnen wechselst du zwischen klassischem Single‑Open‑Verhalten (mit data-bs-parent) und Multi‑Open‑Verhalten ohne Parent‑Bindung.

Die Option Erstes Item standardmäßig geöffnet setzt den Initialzustand für den ersten Eintrag (show plus aria-expanded="true"). Mit Druck-Button anzeigen aktivierst du die druckbare Variante des Blocks, die im Frontend einen Print‑Button oberhalb des Accordions einblendet. Über Druck-Button HTML (Override) kannst du diesen Button pro Instanz überschreiben; bleibt das Feld leer, greift die globale Theme‑Einstellung.

Items verwalten

Mit Items laden liest das Panel den aktuellen Zustand aus der Vorschau ein. Neue Elemente fügst du über Item hinzufügen hinzu, löschen kannst du einzelne Einträge über das × im jeweiligen Item‑Header. Die Reihenfolge wird per Drag & Drop gesteuert; sie entspricht direkt der späteren Frontend‑Reihenfolge. Beim Umordnen oder Löschen passt das Panel die Nummerierung automatisch an.

Inhalt erhalten

Beim Bearbeiten speichert der Block die Inhalte der .accordion-body-Bereiche zwischen und ordnet sie über die Collapse‑IDs wieder korrekt zu. Dadurch bleiben Texte und eingebettete Blöcke erhalten, auch wenn Titel, Reihenfolge oder technische IDs geändert werden.

Verhalten im Frontend

Das Frontend rendert das vom Panel generierte Accordion‑Markup. Die Assets accordion.css und accordion-print.js werden gezielt nur dann geladen, wenn es sich um einen Singular‑Kontext handelt und im Inhalt tatsächlich ein Accordion mit lc-helper="twtheme-accordion" enthalten ist. So werden Seiten ohne Accordion nicht mit zusätzlichem CSS/JS belastet.

Druck-Funktion

Ist die Druckfunktion aktiv, ergänzt das Frontend per JavaScript automatisch einen Druck‑Button oberhalb des Blocks. Für die Ausgabe gilt eine feste Reihenfolge: Zuerst wird das lokale Override aus dem Block verwendet, falls vorhanden; andernfalls die globale Theme‑Vorgabe.

Theme-Optionen: Druck-Button

Unter Theme-Optionen → LiveCanvas → Accordion steht das Feld Print Button HTML (accordion_print_button_html) zur Verfügung. Dieser HTML‑Code ist die globale Standardausgabe für den Druck‑Button und wird als Fallback genutzt, wenn im einzelnen Accordion kein Override gesetzt wurde. Eingehängt wird diese Option über twtheme_option_fields in den LiveCanvas‑Optionsbereich.

Entwicklertipps & Filter

Filter: twtheme_lc_accordion_print_button_html

Der konkrete Button‑HTML‑Code wird über twtheme_lc_accordion_print_button_html() bereitgestellt und über den Filter twtheme_lc_accordion_print_button_html final anpassbar gemacht. Die Auflösung erfolgt dabei immer in derselben Priorität: lokales Panel‑Override (data-print-button-html), danach Theme‑Option accordion_print_button_html, danach fester Fallback im Theme.

In der Praxis eignet sich der Filter vor allem, um ein einheitliches Button‑Design zentral zu erzwingen oder den Standardtext projektweit anzupassen.

Technische Dokumentation

Überblick

Dieses Kapitel fasst den aktuellen Stand zu accordion direkt aus dem Theme-Code zusammen.

Einstellungen

Funktion Einstellungskontext
twtheme_accordionRandomId() Steuert den Bereich accordionRandomId.
twtheme_enableAccordionSorting() Steuert den Bereich enableAccordionSorting.
twtheme_ensureRandomAccordionId() Steuert den Bereich ensureRandomAccordionId.
twtheme_lc_accordion_get_default_icon() [aktualisiert] Accordion: Frontend- und Backend-Funktionalität außerhalb des LC-Editors.
twtheme_lc_accordion_print_button_html() Accordion: Frontend- und Backend-Funktionalität außerhalb des LC-Editors.
twtheme_lc_accordion_print_button_markup($label = '', $position = 'top', $icon_position = null) [aktualisiert] Fertiges HTML für den Accordion-Druck-Button (%s durch Default-Label ersetzt).
twtheme_lc_accordion_print_button_template() [aktualisiert] Accordion: Frontend- und Backend-Funktionalität außerhalb des LC-Editors.
twtheme_loadAccordionItems() [aktualisiert] Steuert den Bereich loadAccordionItems.
twtheme_reindexAccordion() Steuert den Bereich reindexAccordion.
twtheme_toggleExpandAllOptions() [neu] Steuert den Bereich toggleExpandAllOptions.

Verhalten im Frontend

Funktion Frontend-Relevanz
twtheme_lc_accordion_get_default_icon() [aktualisiert] Accordion: Frontend- und Backend-Funktionalität außerhalb des LC-Editors.
twtheme_lc_accordion_print_button_html() Accordion: Frontend- und Backend-Funktionalität außerhalb des LC-Editors.
twtheme_lc_accordion_print_button_template() [aktualisiert] Accordion: Frontend- und Backend-Funktionalität außerhalb des LC-Editors.

Entwicklertipps

Relevante Funktionen

Funktion Parameter Zweck
twtheme_accordionRandomId() — Steuert den Bereich accordionRandomId.
twtheme_enableAccordionSorting() — Steuert den Bereich enableAccordionSorting.
twtheme_ensureRandomAccordionId() — Steuert den Bereich ensureRandomAccordionId.
twtheme_lc_accordion_get_default_icon() — [aktualisiert] Accordion: Frontend- und Backend-Funktionalität außerhalb des LC-Editors.
twtheme_lc_accordion_print_button_html() — Accordion: Frontend- und Backend-Funktionalität außerhalb des LC-Editors.
twtheme_lc_accordion_print_button_markup($label = '', $position = 'top', $icon_position = null) $label: Ausgabe-/Textinhalt (Standard: ''); $position: Funktionsparameter (Standard: 'top'); $icon_position: Funktionsparameter (Standard: null) [aktualisiert] Fertiges HTML für den Accordion-Druck-Button (%s durch Default-Label ersetzt).
twtheme_lc_accordion_print_button_template() — [aktualisiert] Accordion: Frontend- und Backend-Funktionalität außerhalb des LC-Editors.
twtheme_loadAccordionItems() — [aktualisiert] Steuert den Bereich loadAccordionItems.
twtheme_reindexAccordion() — Steuert den Bereich reindexAccordion.
twtheme_toggleExpandAllOptions() — [neu] Steuert den Bereich toggleExpandAllOptions.
twtheme_togglePrintOptions() — Steuert den Bereich togglePrintOptions.

Hooks & Filter

Hook/Filter Typ Parameter Zweck
twtheme_lc_accordion_print_button_html apply_filters - [aktualisiert] Hook twtheme_lc_accordion_print_button_html wird via apply_filters eingebunden.
twtheme_lc_accordion_print_button_label apply_filters - [aktualisiert] Hook twtheme_lc_accordion_print_button_label wird via apply_filters eingebunden.
twtheme_lc_accordion_print_button_position apply_filters - [neu] Hook twtheme_lc_accordion_print_button_position wird via apply_filters eingebunden.
twtheme_lc_accordion_toggle_all_label_collapse apply_filters - [neu] Hook twtheme_lc_accordion_toggle_all_label_collapse wird via apply_filters eingebunden.
twtheme_lc_accordion_toggle_all_label_expand apply_filters - [neu] Hook twtheme_lc_accordion_toggle_all_label_expand wird via apply_filters eingebunden.
twtheme_lc_accordion_toggle_all_position apply_filters - [neu] Hook twtheme_lc_accordion_toggle_all_position wird via apply_filters eingebunden.
twtheme_option_fields add_filter Callback: Closure Hook twtheme_option_fields wird via add_filter eingebunden.

Stand: 2026-03-11