Accordion

Auf- und zuklappbare Inhaltsbereiche. Basiert auf den nativen HTML-Elementen <details> und <summary> — dadurch funktioniert es ohne JavaScript, ist vollständig barrierefrei und wird beim Drucken automatisch aufgeklappt.

Standard-Accordion

Jedes Accordion kann unabhängig geöffnet und geschlossen werden. Ein Klick auf die Überschrift oder die Leertaste/Enter-Taste genügt.

Einzelne Accordions

Was kostet ein Tarifwechsel?

Ein Tarifwechsel ist bei uns grundsätzlich kostenfrei. Sie können Ihren Tarif jederzeit online ändern. Die neuen Konditionen gelten ab dem nächsten Abrechnungszeitraum. Bei Fragen hilft unser Kundenservice gerne weiter.

Wie lese ich meinen Zählerstand ab?

Den Zählerstand finden Sie auf dem Display Ihres Zaehlers. Bei digitalen Zählern wird er automatisch übermittelt. Bei analogen Zählern notieren Sie bitte die Zahlen vor dem Komma und geben den Stand über unsere App oder das Online-Portal ein. Wir erinnern Sie rechtzeitig per E-Mail.

Was passiert bei einem Umzug?

Melden Sie Ihren Umzug mindestens 2 Wochen vorher über unser Online-Formular an. Wir kümmern uns um die Ab- und Anmeldung Ihres Anschlusses. Wenn Sie an Ihrem neuen Standort ebenfalls von uns versorgt werden möchten, übernehmen wir das nahtlos — ohne Versorgungsunterbrechung.

<Accordion title="Was ist das CP Registry?">
  <p>Das CP Registry ist eine Sammlung moderner, barrierefreier
  Astro-Components für TYPO3-Webprojekte.</p>
</Accordion>

<Accordion title="Welche Technologien werden verwendet?">
  <p>Astro 5, Tailwind CSS v4, TypeScript...</p>
</Accordion>

Exklusiv-Gruppe

Mit dem group-Attribut wird sichergestellt, dass immer nur ein Accordion gleichzeitig offen ist. Beim Oeffnen eines neuen schließt sich das vorherige automatisch. Das nutzt das native HTML-name-Attribut auf <details>.

Nur eins gleichzeitig offen

1. Tarif wählen

Vergleichen Sie unsere Tarife online und wählen Sie den passenden für Ihren Haushalt. Unser Tarifrechner zeigt Ihnen anhand Ihres Jahresverbrauchs den guenstigsten Tarif — inklusive aller Steuern und Abgaben.

2. Online anmelden

Fuellen Sie das Anmeldeformular mit Ihren Daten aus: Zählerstand, bisheriger Anbieter, gewünschter Starttermin. Die Anmeldung dauert weniger als 5 Minuten.

3. Wir kümmern uns um den Rest

Nach Ihrer Anmeldung übernehmen wir alles Weitere: Kündigung beim alten Anbieter, Netzbetreiber-Kommunikation und nahtlose Umstellung. Sie erhalten eine Bestätigungsmail mit allen Details.

<AccordionGroup>
  <Accordion title="Schritt 1" group="steps" open>
    <p>Inhalt...</p>
  </Accordion>
  <Accordion title="Schritt 2" group="steps">
    <p>Inhalt...</p>
  </Accordion>
</AccordionGroup>

Mit Heading Level

Für korrekte Dokumentstruktur kann das Heading-Level der Überschrift angepasst werden (h2-h6). Standardmäßig wird ein <span> gerendert.

Heading Level setzen

Diese Überschrift ist eine H3

Wichtig für SEO und Barrierefreiheit: Überschriften sollten die logische Hierarchie der Seite widerspiegeln. Ist das Accordion auf einer Seite nach einer H2 platziert, sollte es als H3 definiert werden.

<Accordion title="Als H3" headingLevel={3}>
  <p>Diese Überschrift ist semantisch eine H3.</p>
</Accordion>

Redakteur-Hinweise

Empfehlungen für gut lesbare Accordion-Inhalte.

Element	Empfehlung
Titel	Als Frage formulieren oder als kurze Aussage (5–12 Wörter). „Wie melde ich meinen Umzug?“ statt „Umzug“.
Inhalt	2–4 Sätze (50–150 Wörter). Bei laengeren Texten Absätze oder Listen nutzen. Kein zweites Accordion im Accordion.
Anzahl	3–8 Einträge pro Gruppe. Bei mehr als 8: Aufteilen in thematische Gruppen mit eigener Überschrift.
Reihenfolge	Haeufigste Fragen zuerst. Bei Schritt-Anleitungen: chronologisch mit Exklusiv-Gruppe.
Offen starten	Das erste Accordion mit `open` öffnen, damit Nutzer sofort sehen, dass Inhalt dahinter steckt.

Installation

cp-components add accordion