Textüberschrifft, mit der mann dann den ganzen Text aufklappen kann ..

Hallo, Ich suche eine CSS Definition mit der man Texte, die nach einer Überschrift stehen, aufklappen kann: mein Text 1 > mein Text 2 > Wenn man da auf den Pfeil klickt, kommt: mein Text 1 < asadadasdasdasdasdasd adsasdasdasdadsadsasdasd mein Text 2 < Hat da jemand eine Standardversion gesehen, oder gemacht?

Der hier verwendete Code

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align:center; outline: none; font-size: 35px; transition: 0.4s; } .active, .accordion:hover { background-color: lightblue; } .panel { margin:0; padding:0; display: none; background-color: #abcd00; overflow: hidden; height:100px; } p{ text-align:center; font-size:60px; margin:0; padding:0; } </style> </head> <body> <h2>Sowas nennt sich accordion</h2> <button class="accordion">Eine menge Überschrift 1</button> <div class="panel"> <p>text1</p> </div> <button class="accordion">Und noch mehr Überschrift 2</button> <div class="panel"> <p>text2</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!