Inhalt
Eine Möglichkeit, die mir gut gefallen hat, ist der Accordion-Effekt in der HTML Syntax. Dazu musst du in WordPress nur einen HTML Block machen und den entsprechenden HTML-Text hinein kopieren. Mit anderen Website-Systemen funktioniert das ähnlich.
Zur Erleichterung habe ich mir einen kleinen Generator für den Akkordeon Effekt erstellt. Du gibst dort die Frage und Antworten ein und schon erhältst du den HTML Code.
Und hier ist er, mein Accordion HTML-Effekt Generator. Fülle die Felder aus oder lass einige leer. Danach auf den Button unten klicken und den HTML-Code erzeugen lassen.
Es gibt noch einige andere Möglichkeiten den Akkordeon Effekt auf deiner Website umzusetzen. Zum Beispiel mit CSS und Javascript. Nachfolgend ein Beispiel.
1. Erstelle einen CSS Abschnitt im "head-Bereich" oder in deiner CSS-Datei:
<style>
.aZeile {
background-color: #ffffff;
padding: 25px 20px;
overflow: hidden;
display: none;
}
.aBtn0Aktiv, .aBtn0:hover {
font-weight: bold;
font-size: 20px;
background-color: #ffeec2;
}
.grid{
display: grid;
grid-template-columns: 1fr;
}
.aBtn0 {
padding: 10px;
background-color: #cdcdcd;
color: white;
width: 70%;
border: 3px;
transition: 0.7s;
margin-bottom: 5px;
font-size: 18px;
color: #282828;
cursor:
pointer;
}
</style>2. Im Body-Bereich erstellst du den eigentlichen Inhalt:
<div class="grid">
<button class="aBtn0">Überschrift / Frage
#1</button>
<div class="aZeile">
<p>Die Antwort auf die Fragen oben
kannst
du hier reinschreiben</p>
<p>Der Text kann beliebig lang sein.</p>
</div>
<button class="aBtn0">Überschrift / Frage #2</button>
<div class="aZeile">
<p>Hier findest du den Inhalt zu der Nummer
#2</p>
</div>
</div>3. Darunter oder am Ende packst du die Javascript-Funktion.
<script>
var aInhalt = document.getElementsByClassName("aBtn0");
var z;
for
(z = 0; z < aInhalt.length; z++)
{
aInhalt[z].addEventListener("click",
function()
{
this.classList.toggle("aBtn0Aktiv");
var aInhaltErg =
this.nextElementSibling;
if (aInhaltErg.style.display === "block")
aInhaltErg.style.display = "none";
else
aInhaltErg.style.display =
"block";
});
}
</script>Die Antwort auf die Fragen oben kannst du hier reinschreiben
Der Text kann beliebig lang sein.
Hier findest du den Inhalt zu der Nummer #2
Ich würde mich freuen, wenn du einen Kommentar schreibst. Was hat dir gefallen, was nicht. Was fehlt dir und was würdest du gerne wissen.
Kommentar schreiben (hier klicken)Predrag Bjelajac
vor 2 Jahren
Hallo,
ich finde es spitze,
Danke für eure Hilfe
Burkhard
vor 2 Jahren
Das freut mich, dass die Infos dir geholfen haben. LG Burkhard.
anne
vor 2 Jahren
Hallöchen,
wie kann ich erreichem das eines von den Akkordionelementen offen bleibt?
Dankeschön
Burkhard
vor 2 Jahren
Hallo Anne, du musst hinter dem detail – Tag ein „open“ anfügen. Das sieht dann so aus:
details open style …….
Anne
vor 2 Jahren
Klappt, dankeschön. Also ich hab jetzt mehrere (8), möchte das erste offen, soll aber schließen wenn das 2. geklickt wird und dann so weiter wenn 3. geklickt 2. zu usw., geht doch sicher auch? Sonst wirds zu lang wenn alle offen sind …
Grußle Anne
Burkhard
vor 2 Jahren
Hallo Anne, das geht leider so nicht. Da müsstest du schon Javascript bzw. jQuery nutzen. Es geht auch in CSS. Das Ganze ist dann schon ein klein wenig aufwändiger. Ich habe nach dem Generator noch einen Abschnitt mit Javascript und CSS hinzugefügt.
(c) 2024 - Web-for-Beginners.de