手风琴按钮未隐藏的文本

Question

hi I am building a button where hide/show content when click on, however when I apply some styles to the content it won't hide anymore, I suspect it has got something to do with the css position, but can't figure it out why, could someone please help me? thanks in advance

  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

Your paragraphs are absolute ly positioned, but not relative to the panel that is hiding/showing. To position those relative to .panel , add position: relative to .panel , and the paragraphs will hide/show with `.panel.