Css collapsible button verschieben

Ich habe 2 collapsible Buttons und möchte den einen weiter nach unten verschieben. Wenn ich mit den p-Tag einen Zeilenumbruch erzwinge, funktioniert der Button jedoch nicht mehr wie gewünscht.

Der hier verwendete Code

<html> <head><title>Css button</title> <meta charset="UTF-8"> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .collapsible { background-color: #A9D0F5; color: white; cursor: pointer; padding: 18px; width: 15%; border-radius: 15px 50px 30px; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .content { padding: 0 18px; max-height: 0px; overflow: hidden; text-align: left; border-radius: 15px 50px 30px; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } .zwei{ margin-top:40px; } </style> </head> <body style="background-color:powderblue;font-family:sans-serif"> <button class="collapsible">B1</button> <div class="content"> <p>Irgend ein Text</p> </div> <button class="zwei collapsible">B2</button> <div class="content"> <p>Ein anderer Text</p> </div> <script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } </script> </body> </html>

Add Comment

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

Comments

No comments yet. Be the first!