Css collapsible button verschieben

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

gamma

Neues Mitglied
19 Mai 2018
6
0
1
25
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.
HTML:
<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: 0;

    overflow: hidden;

    text-align: left;

    border-radius: 15px 50px 30px;

    transition: max-height 0.2s ease-out;

    background-color: #f1f1f1;

}
</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="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>
Wie kann ich den button B2 vertikal zu button B1 versetzen?
Danke schon mal für die Hilfe.
 
Werbung: