eine CSS-Liste erstellen bei der der Text unterhalb jedes Listeneintrags ein- oder ausgeklappt wird nach Klick auf den Listeneintrag

Auf meinen Websites nutze ich zwar YooTheme Pagebuilder, der mit dem UI-Kit arbeitet und auch standardmäßige Accordions anbietet. Die Accordions nehmen mir aber viel zu viel Platz ein in diesem Fall. Ich suche nach einer Lösung, wo eine Liste mit Titeln angeboten wird. Klickt man auf einen dieser Titel, klappt direkt darunter der Text aus. Das Ganze so platzsparend wie möglich. Denn es geht einfach um ein Newsletter-Archiv, wo der User auf ein Datum klickt und dann den zugehörigen Newsletter angezeigt bekommt. Klickt er auf ein anderes Datum, schließt sich natürlich das bisher geöffnete Datum und das neue öffnet sich.

Im Web fand ich folgenden KI-generierten Vorschlag, der aber leider nicht funktioniert, weil alles immer aufgeklappt bleibt:

Zitat

Um eine CSS-Liste zu erstellen, bei der der Text unterhalb jedes Listeneintrags nach
einem Klick ein- oder ausklappt, wird die <details>- und <summary>-Elemente in Kombination
mit CSS verwendet.

Funktionsweise
Das <details>-Element ist standardmäßig geschlossen.
Der <summary>-Teil ist der sichtbare Titel, auf den der Benutzer klicken kann.
Mit dem Attribut open im <details>-Tag wird der Eintrag standardmäßig geöffnet.
Die CSS-Pseudoklasse :focus oder :hover kann ergänzt werden, um visuelle Hinweise zu geben.
Die list-style: none bei summary entfernt den Standard-Listenelement-Style, falls in einer
Liste verwendet.

HTML-Struktur
<div class="details>
 <div class="summary">Listeneintrag 1</div>
 <p>Text, der beim Klicken ein- oder ausgeklappt wird.</p>
</div>

<div class="details>
 <div class="summary">Listeneintrag 2</div>
 <p>Weitere Informationen, die nur sichtbar sind, wenn der Eintrag geöffnet ist.</p>
</div>

CSS-Styling (optional, für visuelles Feedback)
.details {
 margin-bottom: 10px;
 border: 1px solid #ccc;
 border-radius: 4px;
 overflow: hidden;
}

.summary {
 background-color: #f0f0f0;
 padding: 10px;
 cursor: pointer;
 font-weight: bold;
 list-style: none;
}

.summary::-webkit-details-marker {
 display: none;
}

.summary::before {
 content: "▶";
 margin-right: 8px;
}

.details[open] .summary::before {
 content: "▼";
}

Alles anzeigen

Im Prinzip ist ja genau das, was ich wollte… wenn es denn nur auf-/zuklappen würde!

Weiß jemand, was ich korrigieren muss, damit es funktioniert?

Vielen Dank dir! Das war mein Fehler! Die KI hatte keine Klassen definiert. Aber ich hatte gedacht, es müssten Klassen sein und habe den Code geändert. Ich werde es also neu versuchen.

Das YooTheme Accordion anpassen, dürfte echt schwierig sein, weil diese "ausklapp-Liste" innerhalb einer Textbox mit fester Höhe und Scrollbar funktionieren soll. Ich müsste den ganzen Accordion-Code dann irgendwie innerhalb dieser Textbox laufen haben. Genau deshalb habe ich nach einem CSS-Schnippsel gesucht, der mir das auf einfache Art ermöglicht.

Ich melde mich wieder, wenn es mit dem "KI-Code" funktioniert.

Yooo, jetzt funktioniert's. Ich danke dir herzlich!

Dass es solche HTML-Elemente gibt, wusste ich noch nicht. Bestenfalls kannte ich strong und b für bold oder body oder das "p", war mir aber nicht bewusst, dass das HTML-Elemente sind.