Akkordion Effekt HTML – Generator


Stichworte: Tools

Der Akkordion 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 Akkordion Effekt erstellt. Du gibst dort die Frage und Antworten ein und schon erhältst du den HTML Code.

Einfach in das Ergebnisfeld klicken, alles markieren und in die Zwischenablage kopieren. Ctrl.+ A und dann Ctrl. + C.

Und hier ist er, mein Accordion Effekt Generator.



Und so sieht das Ergebnis aus (Beispiel):

Wie gefällt dir der Generator?

Super Sache, gefällt mir gut

Was ist das für ein Unsinn?

Naja, es geht so

Und zur Vollständigkeit noch der Beispiel HTML-Code

<details style="border: 1px solid #666; border-radius: 3px; margin-bottom: 1.5rem;">

<summary style="padding: 1rem; background:#F4F4F4; cursor: pointer;">
Wie gefällt dir der Generator?</summary>

<div style="padding: 1rem 1rem 1px 1rem;">
 
<p>Super Sache, gefällt mir gut</p> 
<p>Was ist das für ein Unsinn?</p> 
<p>Naja, es geht so</p>
 
</div></details>

Hast du den Generator einmal ausprobiert?

Ich würde mich über einen Kommentar sehr freuen

Schreibe einen Kommentar