FAQ-Akkordeon-Dropdown in Carrd.co einfügen (kostenloser Code)

Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.

Carrd hat kein eingebautes Akkordeon-Element. Wenn du ein Akkordeon-FAQ-Dropdown auf deiner Seite willst, bettest du ein paar Zeilen Code ein. Das Plugin in dieser Anleitung ist kostenlos. Die einzigen Kosten sind Carrd Pro Standard für 19 $/Jahr – der günstigste Plan, der das Embed-Element enthält. Das Setup dauert etwa 5 Minuten.

Ein organisatorischer Hinweis: carrd.co leitet inzwischen auf carrd.com weiter. Alte Links funktionieren noch, aber Doku und Login leben ab jetzt auf carrd.com. Wenn du noch überlegst, was die ganze Seite kosten soll: Das FAQ-Akkordeon aus dieser Anleitung ist ein fester Bestandteil von One-Page-Website mit kleinem Budget bauen.

Weitere Carrd-Anleitungen:

• Sticky-Header in Carrd einfügen
• Cookie-Hinweis in Carrd einfügen
• Preistabelle in Carrd.co einfügen
• Carrd.co im Review
• Carrd-Testimonial-Slider
• Zurück-nach-oben-Button in Carrd
• Carrd-Smooth-Scroll-Ankerlinks
• Carrd-Dark-Mode-Umschalter

Die komplette Liste mit Carrd-Plugins, -Themes und -Anleitungen findest du auf carrdme.com.

Was dir das Carrd-Akkordeon-Plugin bietet

Das Plugin ist schlichtes HTML, CSS und ein paar Zeilen Vanilla-JavaScript in einem einzigen Embed-Block. Kein Framework, keine externen Skripte, kein Drittanbieter-Branding. Dieser Vanilla-JS-Punkt zählt mehr, als es klingt: Manche Alternativen ziehen ein ganzes Framework von einem CDN, nur um ein div auf- und zuzuklappen (mehr dazu im Abschnitt zu den Alternativen).

Dieselbe Inline-Embed-Technik steckt hinter anderen interaktiven Elementen in Carrd. Wenn das hier läuft, kannst du mit demselben Ansatz auch ein Popup-Modal in Carrd einfügen.

Was du vor dem Start brauchst

Alles, was nach diesem Abschnitt kommt, setzt Folgendes voraus:

Carrd hat einen 7-tägigen Pro-Trial, wenn du das Embed erst ausprobieren willst, bevor du zahlst. Was die einzelnen Pläne jenseits der Embeds noch bieten, steht im Carrd.co-Review.

So fügst du ein FAQ-Akkordeon in Carrd ein

Fünf Schritte, alle im Carrd-Editor, plus ein kurzer Test auf der Live-Seite.

1. Den kostenlosen Carrd-Akkordeon-Code herunterladen

Hol dir den kostenlosen Code von carrdme.com. Es ist ein einziger Block aus HTML, CSS und JavaScript, den du in Carrd einfügst. Der Download ist wirklich kostenlos: Gib „$0“ ein und du bekommst dieselbe Datei (ein Goodwill-Betrag ist optional).

Zeigt der Download-Link eine Cloudflare-Zwischenseite, öffne ihn in einem normalen Browser. Er blockiert automatisierte Tools, lädt aber für Menschen problemlos.

2. Ein Embed-Element in Carrd hinzufügen

Öffne deine Carrd-Seite im Editor. Klicke im Abschnitt, in dem das FAQ stehen soll, auf Add Element und wähle Embed. Stelle Folgendes ein:

Setze Type auf Code und Style auf Inline. Inline platziert das Akkordeon genau dort, wo das Embed-Element in deinem Layout sitzt – das Akkordeon ist schließlich sichtbarer Inhalt. Hidden würde es stattdessen in den Head oder an die Body-Ränder der Seite schreiben.

Mehr zur Funktionsweise von Carrds Embed-System steht in der offiziellen Carrd-Embed-Doku. (Die URL lag früher auf carrd.co; der alte Link leitet noch weiter.)

Nutze auf langen Seiten More Actions → Elements, um das Elements-Panel zu öffnen. Das ist der schnellste Weg zurück zum Akkordeon-Embed, nachdem du herumgescrollt hast. Es kam mit dem Builder-Update vom August 2026.

3. Code einfügen und deine FAQ-Einträge anpassen

Füge den kompletten Code in das Code-Feld des Embed-Elements ein. Danach bearbeitest du den FAQ-Inhalt. Jeder Akkordeon-Eintrag folgt diesem Muster:

<button class="accordion" aria-expanded="false">Your question here?</button>
<div class="panel">
  <p>Your answer goes here. You can include multiple paragraphs, lists, or inline HTML.</p>
</div>

Das aria-expanded="false"-Attribut gehört zum Barrierefreiheits-Setup weiter unten. Es jetzt schon hinzuzufügen kostet nichts und hält das Markup bereit.

Button und Panel müssen direkt aufeinander folgen: Das Skript öffnet das Element, das unmittelbar auf den geklickten Button folgt.

Weitere Einträge fügst du hinzu, indem du denselben Block wiederholst:

<button class="accordion" aria-expanded="false">What is your refund policy?</button>
<div class="panel">
  <p>We offer a full refund within 30 days of purchase. Contact [email protected] to start the process.</p>
</div>

<button class="accordion" aria-expanded="false">How do I contact support?</button>
<div class="panel">
  <p>Email us at [email protected] or use the contact form on our website. We respond within 24 hours.</p>
</div>

<button class="accordion" aria-expanded="false">Do you offer custom plans?</button>
<div class="panel">
  <p>Yes. Reach out with your requirements and we'll put together a tailored package.</p>
</div>

Ersetze den Platzhaltertext durch deine echten Fragen und Antworten. Dupliziere oder entferne Blöcke, bis deine FAQ-Anzahl passt.

4. Akkordeon-Farben anpassen

Der Code enthält oben einen <style>-Abschnitt mit einem Kommentar neben jeder Farbe. Du kannst den kompletten <style>-Block durch diesen hier ersetzen:

<style>
  /* Accordion styles */
  .accordion {
    background-color: #868e99; /* Accordion color */
    color: #eeebeb; /* Accordion text color */
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 2.1rem;
  }
  .accordion:before {
    content: "\002B";
    color: #4d514d; /* Plus sign color */
    font-weight: bold;
    float: right;
    margin-left: 5px;
    border-radius: 50%;
    padding: 5px;
    transition: transform 0.3s ease-in-out;
  }
  .accordion.active:before {
    transform: rotate(45deg);
    background-color: #4d514d; /* Close (x) icon background */
    color: #d91a1a; /* Close (x) icon color */
  }
  .accordion.active,
  .accordion:hover {
    background-color: #4d514d; /* Hover and open tab color */
    border-radius: 10px;
  }
  .panel {
    padding: 0 18px;
    background-color: #eeebeb; /* Answer panel background */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 10px;
  }
  .panel p {
    margin: 0;
    padding: 10px 10px;
    font-size: 2.1rem;
  }
</style>

Passe die Hex-Farbwerte an die Palette deiner Seite an. Die Kommentare im Code machen es einfach, jede Eigenschaft zu finden.

5. Veröffentlichen und testen

Speichere deine Änderungen und veröffentliche die Seite. Das Akkordeon siehst du erst nach dem Veröffentlichen. Carrds Editor rendert eingebettetes JavaScript nicht im Builder, und die Doku sagt dasselbe.

Hake auf der Live-Seite diese Checkliste ab:

Sitzt das FAQ unterhalb der Fold, verlinke einen Menüpunkt mit Carrd-Smooth-Scroll-Ankerlinks direkt darauf. Erspart Besuchern die Scroll-Suche auf einem langen One-Pager.

Das Akkordeon barrierefrei machen (aria-expanded)

Das Markup nutzt bereits echte <button>-Elemente, Tastatur-Support kommt also gratis. Was fehlt, ist der Zustand: Screenreader können nicht erkennen, ob eine Frage offen ist. Zwei Zeilen fixen das.

Der Click-Handler macht aktuell this.classList.toggle("active") und ignoriert das Ergebnis. Fange den neuen Zustand ab und spiegele ihn nach aria-expanded:

<script>
  // Accordion script
  var acc = document.getElementsByClassName("accordion");
  for (var i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
</script>

<script>
  // Accordion script (accessible)
  var acc = document.getElementsByClassName("accordion");
  for (var i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
      var open = this.classList.toggle("active");
      this.setAttribute("aria-expanded", open);
      var panel = this.nextElementSibling;
      panel.style.maxHeight = open ? panel.scrollHeight + "px" : null;
    });
  }
</script>

<script>
  // Accordion script (multi-embed safe)
  var acc = document.getElementsByClassName("accordion");
  for (var i = 0; i < acc.length; i++) {
    if (acc[i].dataset.bound) continue; // already wired by another copy
    acc[i].dataset.bound = "1";
    acc[i].addEventListener("click", function () {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
</script>

Mit dem barrierefreien Skript braucht außerdem jedes <button class="accordion"> ein aria-expanded="false" im Markup (bereits in Schritt 3 ergänzt). classList.toggle gibt den neuen Zustand zurück – derselbe Klick, der das Panel öffnet, setzt das Attribut also auf true, und der nächste Klick stellt es zurück.

Mehrere Akkordeon-Bereiche auf derselben Seite einbetten

Brauchst du zwei oder mehr getrennte FAQ-Gruppen auf einer Carrd-Seite, füge pro Gruppe ein Inline-Embed hinzu. Ein Haken: Das Skript des Plugins hängt einen Click-Handler an jeden .accordion-Button auf der Seite, nicht nur an die im eigenen Embed. Bei zweimal eingefügtem kompletten Code bekommen die Buttons der ersten Gruppe zwei Handler. Jeder Klick öffnet das Panel und schließt es sofort wieder – die Gruppe wirkt tot.

Der Fix ist, diese Version des <script>-Blocks in jeder Kopie zu nutzen. Sie überspringt Buttons, die eine andere Kopie bereits verdrahtet hat. Willst du zusätzlich das aria-expanded-Verhalten, bleibt der Guard oben in der Schleife und die zwei Aria-Zeilen wandern in den Listener, so:

<script>
  // Accordion script (multi-embed safe + accessible)
  var acc = document.getElementsByClassName("accordion");
  for (var i = 0; i < acc.length; i++) {
    if (acc[i].dataset.bound) continue; // already wired by another copy
    acc[i].dataset.bound = "1";
    acc[i].addEventListener("click", function () {
      var open = this.classList.toggle("active");
      this.setAttribute("aria-expanded", open);
      var panel = this.nextElementSibling;
      panel.style.maxHeight = open ? panel.scrollHeight + "px" : null;
    });
  }
</script>

Der <style>-Block darf in jedem Embed dupliziert bleiben; identische CSS-Regeln kollidieren nicht. Jeder Button braucht weiterhin sein <div class="panel"> direkt dahinter, weil das Skript das Element öffnet, das unmittelbar auf den geklickten Button folgt.

Fehlerbehebung: Carrd-Akkordeon funktioniert nicht

Wenn dein Carrd-Akkordeon nach dem Veröffentlichen nicht funktioniert, ist die Ursache fast immer eine dieser.

Erscheint das Akkordeon nach dem Veröffentlichen nicht, prüfe, ob Type des Embed-Elements auf Code und Style auf Inline steht und ob es in dem Abschnitt liegt, in dem du es erwartest. Bestätige außerdem, dass dein Carrd-Plan Embeds unterstützt (Pro Standard oder höher).

Siehst du das Embed-Element nicht unter Add Element, liegt der Plan unter Pro Standard. Der Free-Tier deckelt auf 3 Seiten und schließt Embeds komplett aus. Upgrade, oder teste erst mit dem 7-Tage-Pro-Trial.

Sieht das Akkordeon kaputt oder ungestylt aus, stelle sicher, dass du den kompletten Code – inklusive des <style>-Blocks oben – in das Code-Feld eingefügt hast.

Färbt sich der ganze Abschnitt grau, nutzt deine Kopie einen nackten .active-Selektor, der Carrds aktiven Abschnitt trifft. Ändere ihn zu .accordion.active (siehe Schritt 4).

Tut ein Klick auf eine Frage nichts, öffne die Browser-Konsole und suche nach JavaScript-Fehlern. Hast du den kompletten Code in zwei Embeds eingefügt, bekommen die Buttons der ersten Gruppe zwei Click-Handler, die sich gegenseitig auslöschen. Nutze das Skript aus dem Abschnitt zu mehreren Akkordeons weiter oben.

Ist der Text auf dem Handy zu klein, ergänze eine font-size-Überschreibung im Style-Abschnitt des Codes. Zum Beispiel: .accordion { font-size: 16px; } und .panel p { font-size: 15px; }.

Zeigt der Download-Link eine Cloudflare- oder Zwischenseite, öffne ihn in einem normalen Browser. Der Link sitzt hinter einer Bot-Challenge für automatisierte Tools; die Plugin-Seite selbst ist live und per Hand erreichbar.

Alles rückgängig machen: Lösche das Embed-Element und veröffentliche erneut. Nichts anderes in Carrd wird angefasst – ein Rollback ist so einfach.

Alternativen zum Code-Embed-Ansatz

Wenn du lieber keinen rohen Code pflegen willst oder ein anderes visuelles Design suchst, gibt es drei andere Wege. Mein Standard bleibt das CarrdMe-Snippet oben: kostenlos, kein Branding, komplett bearbeitbar und der kleinste Treffer beim Seitengewicht.

No-JavaScript-Option: <details>/<summary>

Da das Inline-Embed beliebiges HTML annimmt, bekommst du mit nativem <details>/<summary> ein funktionierendes Akkordeon ohne eine Zeile JavaScript. Der Browser übernimmt Auf- und Zuklappen:

<details class="faq">
  <summary>What is your refund policy?</summary>
  <p>Full refund within 30 days. Contact [email protected] to start the process.</p>
</details>

<details class="faq">
  <summary>How do I contact support?</summary>
  <p>Email us at [email protected]. We respond within 24 hours.</p>
</details>

Style summary wie die .accordion-Leiste (Hintergrund, Padding, border-radius, Cursor) und tausche das Plus-Icon gegen eine summary::before-Regel. Der Tradeoff ist die Animation: Standardmäßig gibt es keine weiche max-height-Transition. Die neueren interpolate-size- und transition-behavior: allow-discrete-CSS können sie animieren, aber der Browser-Support ist Stand Oktober 2026 noch lückenhaft – ich würde die Animation hier weglassen.

Die JS-Version ist animiert und nimmt das Aria-Upgrade an. <details>/<summary> ist kugelsicher, aber nicht animiert.

Common-Ninja-Akkordeon-Widget

Ein gehosteter Widget-Service, der das Akkordeon für dich generiert und dir ein Embed-Snippet gibt. Preise Stand Oktober 2026:

• Free-Tier: 0 $, für immer kostenlos, keine Kreditkarte nötig
• Essentials: 24 $/Jahr (2 $/Monat, jährlich abgerechnet)
• Pro: 38,40 $/Jahr (3,20 $/Monat, jährlich abgerechnet)
• Ultimate: 62,40 $/Jahr (5,20 $/Monat, jährlich abgerechnet)

Alle Tiers werden jährlich abgerechnet; Listenpreise ohne MwSt. Das Free-Tier lief historisch mit Common-Ninja-Branding, und erst die bezahlten Tiers entfernen es. Denk dran: Das ist ein gehostetes Widget – ein Drittanbieter-Skript lädt auf deiner Seite, und du hast weniger Kontrolle über die Ausgabe als beim CarrdMe-Snippet.

Jasons Plugins für Carrd

plugins.carrd.co hostet zwei Akkordeon-Varianten, beide kostenlos („$0 eintippen oder einen Goodwill-Betrag deiner Wahl“):

• Accordion FAQs drop-down: leicht und minimal mit animierten Chevron-Icons. Demo: accordionfaqs.carrd.co.
• Animated accordion FAQs drop-down: dasselbe Dropdown mit Bounce-Animation statt Chevron. Demo: animatedaccordionfaqs.carrd.co.

Zwei Dinge ändern hier den Workflow. Erstens kommen sie als Carrd-Templates: Nach dem Download gehst du ins Carrd-Dashboard, wählst New site, öffnest den Tab My Templates und wählst das Template. Dann kopierst du den Code aus dieser Template-Seite und mergest ihn in deine. Zweitens lädt die animierte Variante Vue.js von einem CDN. Auf einer One-Page-Seite, auf der du Kilobytes zählst, ist das spürbar schwerer als das Vanilla-JS-Snippet von CarrdMe.

Gefällt dir der CarrdMe-Ansatz und du willst dieselbe Technik für Tab-Inhalte: Das Carrd-Tabs-Plugin funktioniert genauso – ein Inline-Embed, kein Framework.

Zeigt Google mein FAQ-Akkordeon als Rich Result?

Kurze Antwort: wahrscheinlich nicht. Stand Oktober 2026 zeigt Google FAQ-Rich-Results nur für bekannte, autoritative Regierungs- und Gesundheits-Websites, und How-to-Rich-Results sind komplett weg.

Das Schema selbst ist harmlos und für Semantik und andere Suchmaschinen weiterhin nützlich. Füge nur kein FAQPage-JSON-LD (über ein Hidden-→-Head-Embed) hinzu und erwarte aufklappbare FAQ-Listings in Googles SERP.

Fazit

Kosten-Recap: 19 $/Jahr für Carrd Pro Standard sind die einzigen Kosten, und der Akkordeon-Code ist kostenlos. Hol dir das Plugin, füge es in ein Inline-Embed ein, veröffentliche – und du hast ein funktionierendes FAQ-Dropdown. Um es später zu entfernen, löschst du das Embed-Element und veröffentlichst erneut; nichts anderes in Carrd wird angefasst.

Als Nächstes auf deiner Carrd-Seite: ein Sticky-Header, eine Preistabelle und Smooth-Scroll-Ankerlinks, die direkt zum FAQ springen.

Kurze Antworten