akkordeon button unhidden text

Question

hi ich baue einen button wo hide/show content wenn ich klicke auf, aber wenn ich einige styles auf den inhalt anwenden wird es sich nicht mehr verstecken, ich vermute es hat etwas mit der css position zu tun , aber kann nicht herausfinden, warum, könnte mir bitte jemand helfen? Vielen Dank im Voraus

var acc = document.getElementsByClassName("accordion"); 
 
    var i; 
 

 
    for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
    panel.style.maxHeight = null; 
 
    } else { 
 
    panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
    }

button.accordion { 
 
    background-color: #13294b; 
 
    border: 2px solid #59cbe8; 
 
    border-radius: 0px 10px 0px 10px; 
 
    box-shadow: 7px 7px 5px #cccccc; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    padding: 10px 15px 10px 15px; 
 
    margin: 4px 0px 7px 0px; 
 
    width: 100%; 
 
    font-size: 18px; 
 
    transition: 0.4s; 
 
    outline: none; 
 
    text-align: left; 
 
    } 
 
    
 
    button.accordion.active, button.accordion:hover { 
 
    background-color: #1f447b; 
 
    } 
 

 
    button.accordion:after { 
 
    content: '\002B'; 
 
    color: #59cbe8; 
 
    font-weight: bold; 
 
    float: right; 
 
    } 
 

 
    button.accordion.active:after { 
 
    content: "\2212"; 
 
    } 
 

 
    .panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
    } 
 

 
    .action1 { 
 
    position: absolute; 
 
    margin-top: -115px; 
 
    margin-left: 35px; 
 
    width: 100%; 
 
    color: #c1c1c1; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    } 
 

 
    .action2 { 
 
    position: absolute; 
 
    margin-top: -115px; 
 
    margin-left: 175px; 
 
    width: 100%; 
 
    color: #c1c1c1; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    }

<button class="accordion">This is the button</button> 
 
    <div class="panel"> 
 
    <p><img width="650" height="114" style="border: 0px solid rgb(0, 0, 0); border-image: none;" src="./?a=654193" /><br /></p> 
 
    <p class="action1">Recognise</p> 
 
    <p class="action2">Remove from play</p> 
 
    </div>

Answer 1

Ihre Absätze werden absolute ly positioniert, sondern an der Platte nicht relativ, die/Vorführung versteckt. Um diese relativ zu .panel zu positionieren, fügen Sie position: relative zu .panel hinzu, und die Absätze werden mit `.panel ein-/ausblenden.