アコーディオンボタン非表示のテキスト

Question

こんにちは私は、クリックするとコンテンツを隠す/表示するボタンを構築していますが、コンテンツにスタイルを適用すると、それはもはや隠れません。私はそれがCSSの位置なぜ、誰かが私を助けてくれるのだろうか？事前

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

でのおかげであなたの段落は、absolute LY位置が、/上映を隠しているパネルに対する相対されていません。それらの相対位置を.panelに設定するには、position: relativeを.panelに追加します。段落は `.panel 'で表示/非表示になります。