Icon

Akkordeon Effekt HTML – Generator


Der Akkordeon Effekt, auch Ziehharmonika- Effekt genannt, ist ein beliebtes Stilmittel auf FAQ-Seiten. Bei WordPress gibt es da einige Plugins, aber ich suchte eine Lösung ohne gleich ein Plugin zu installieren

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.

Foto

HTML Generator

Icon

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.




Auf den Button HTML-Code erzeugen klicken und dann erscheint hier das Ergebnis!


Und so sieht das Ergebnis auf der Webseite aus:

HTML Akkordeon mit Javascript

Icon

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>

Und so sieht das Ergebnis auf der Webseite aus:

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

Deine Meinung

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)

Kommentare


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 1 Jahren

Hallöchen,
wie kann ich erreichem das eines von den Akkordionelementen offen bleibt?
Dankeschön


Burkhard

vor 1 Jahren

Hallo Anne, du musst hinter dem detail – Tag ein „open“ anfügen. Das sieht dann so aus:
details open style …….


Anne

vor 1 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 1 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