--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/layout/collapsibles-element' title: 'Ein aufklappbares Panel hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:34:04+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Nutzen Sie ein Collapse-Panel, auch Akkordeon genannt, wenn Sie eine Liste von Überschriften wollen, die Besucher einzeln öffnen. Es eignet sich für FAQs, Funktionslisten und lange Inhalte, die sich in Teilen besser lesen. Sie erhalten einen Stapel Fragen, deren Antworten sich per Klick öffnen. Das Beispiel baut drei Fragen für eine Agentur-FAQ-Seite.' tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ein aufklappbares Panel hinzufügen' description: 'Nutzen Sie ein Collapse-Panel, auch Akkordeon genannt, wenn Sie eine Liste von Überschriften wollen, die Besucher einzeln öffnen. Es eignet sich für FAQs, Funktionslisten und lange Inhalte, die sich in Teilen besser lesen. Sie erhalten einen Stapel Fragen, deren Antworten sich per Klick öffnen. Das Beispiel baut drei Fragen für eine Agentur-FAQ-Seite.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:34:04+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/layout/collapsibles-element' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/layout/collapsibles-element' description: 'Nutzen Sie ein Collapse-Panel, auch Akkordeon genannt, wenn Sie eine Liste von Überschriften wollen, die Besucher einzeln öffnen. Es eignet sich für FAQs, Funktionslisten und lange Inhalte, die sich in Teilen besser lesen. Sie erhalten einen Stapel Fragen, deren Antworten sich per Klick öffnen. Das Beispiel baut drei Fragen für eine Agentur-FAQ-Seite.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Ein aufklappbares Panel hinzufügen. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Ein Tabs-Panel hinzufügen](/de/hc/documentation/learn-dxpr-builder/layout/tabs-element) - [Performance](/de/hc/documentation/learn-dxpr-builder/tutorials/faq-page) - [KI-Texte prüfen und übernehmen](/de/hc/documentation/learn-dxpr-builder/layout/nesting) Nutzen Sie ein Collapse-Panel, auch Akkordeon genannt, wenn Sie eine Liste von Überschriften wollen, die Besucher einzeln öffnen. Es eignet sich für FAQs, Funktionslisten und lange Inhalte, die sich in Teilen besser lesen. Sie erhalten einen Stapel Fragen, deren Antworten sich per Klick öffnen. Das Beispiel baut drei Fragen für eine Agentur-FAQ-Seite. ## Ein aufklappbares Panel hinzufügen 1. Klicken Sie auf **+** auf einer Section und wählen Sie **Collapse panel** aus dem Tab **Layout**. Es kommt mit einem Toggle. 2. Öffnen Sie die Einstellungen des Panels über sein **More**-Menü. Wählen Sie mit **Collapse**, ob jeder Toggle geschlossen startet. Hier ist es an. Wählen Sie ein **Expand icon** und klicken Sie auf **Save**. 3. Fahren Sie über den Toggle, öffnen Sie sein **More**-Menü und wählen Sie **Settings**. Geben Sie die Frage als **Toggle title** ein und klicken Sie auf **Save**. 4. Klicken Sie auf die Frage, um den Toggle zu öffnen. Klicken Sie auf **+** darin, wählen Sie **Text** und geben Sie die Antwort ein. 5. Klicken Sie auf **Add toggle** in der Kontrollleiste des Panels für die nächste Frage. Neue Toggles landen oben, also fügen Sie die letzte Frage zuerst hinzu. 6. Klicken Sie auf **Save** in der Symbolleiste. Klicken Sie in der Vorschau auf eine Frage, um zu prüfen, dass sich ihre Antwort öffnet. ## Was Sie sehen Jede Frage ist eine Überschrift mit dem gewählten Expand-Icon. Ein Klick öffnet ihre Antwort darunter, und die zuvor offene Antwort schließt sich. Mit ausgeschaltetem **Collapse** ist beim Laden der Seite die erste Antwort offen. Die Antworten bleiben geschlossen im HTML der Seite, sodass Suchmaschinen sie weiter lesen können. ## Ihr aufklappbares Panel einrichten Das Element **Collapse panel** hat zwei Einstellungen, unter **More** > **Settings** in seiner Kontrollleiste. | Einstellung | Funktion | Standard | |---|---|---| | **Collapse** | An: Jeder Toggle startet geschlossen. Aus: Der erste Toggle startet offen | Off | | **Expand icon** | Das Icon neben jedem Titel: **None**, **+** (Plus und Minus) oder **﹀** (ein Pfeil) | None | Jeder Toggle hat eine Einstellung, **Toggle title**: die Frage oder Überschrift, die Besucher anklicken. ## Toggles verwalten - **Reorder**: Ziehen Sie einen Toggle an **Toggle** in seiner Kontrollleiste und legen Sie ihn über oder unter einem anderen ab. - **Rename**: Fahren Sie über den Toggle, öffnen Sie **More** > **Settings**, ändern Sie **Toggle title** und klicken Sie auf **Save**. - **Remove**: Fahren Sie über den Toggle, öffnen Sie **More** und wählen Sie **Delete**. Die Antwort darin geht mit. Ein Toggle fasst beliebige Elemente: Text, Bilder, Buttons oder eine Zeile mit Spalten. Halten Sie jede Antwort kurz. Wenn eine Antwort eine eigene Seite braucht, verlinken Sie stattdessen auf diese Seite. ## Wenn Sie es nicht sehen - **Die neue Frage erscheint oben.** **Add toggle** fügt immer oben im Panel ein. Ziehen Sie den Toggle an **Toggle** in seiner Kontrollleiste an die gewünschte Stelle. - **Die Einstellungen zeigen nur Toggle title.** Sie haben die Einstellungen eines Toggles geöffnet. Fahren Sie über die Oberkante des Panels, sodass die Kontrollleiste von **Collapse panel** erscheint, und öffnen Sie dort **More** > **Settings**. - **Die erste Antwort ist beim Laden der Seite offen.** **Collapse** ist aus. Schalten Sie es in den Einstellungen von **Collapse panel** ein, damit jede Antwort geschlossen startet. - **Collapse panel fehlt im Layout-Tab des Pickers.** Ihr DXPR Builder-Benutzerprofil lässt es aus. Ein Administrator wählt **Accordion** unter **Elements** in Ihrem Profil unter `/admin/dxpr_studio/dxpr_builder/profile`. ## Wie geht es weiter? - [Ein Tabs-Panel hinzufügen](/de/hc/documentation/learn-dxpr-builder/layout/tabs-element): Verwandte Inhalte nebeneinander statt gestapelt zeigen. - [FAQ-Seiten-Tutorial](/de/hc/documentation/learn-dxpr-builder/tutorials/faq-page): Eine ganze FAQ-Seite um ein Collapse-Panel bauen. - [Verschachtelung](/de/hc/documentation/learn-dxpr-builder/layout/nesting): Zeilen und Spalten in einen Toggle legen.