想要按钮在页面加载时隐藏内容，然后在单击按钮时显示

Question

我的按钮类是“accordion”，但加载页面时会显示应隐藏的内容。 我希望它以隐藏的方式启动，然后在单击时显示。

老实说，我尝试了很多东西，我不记得我从哪里开始。

  var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function(active) { this.classList.toggle("hidden"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } 

  .accordion { background-color: grey; color: #444; cursor: pointer; padding: 18px; width: 100%; border: 80px; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: grey; } .panel, .button { padding: 80px 18px; display: none; background-color: grey; overflow: hidden; } 

  <button class="accordion" style="background-color:grey" > <div class="row" section-padding-80 clearfix> <div class="col-12 text-center wow fadeInUp" data-wow-delay="800ms"> <a href="#" class="btn alime-btn btn-2 mt-15">View More</a> </div> </div></button> <div class="row alime-portfolio" style="background-color:grey;"> <div class="container-fluid"> 

同样，我需要在加载页面时隐藏内容，然后在单击按钮时显示。

Answer 1

我将在这里编写一个来自你所说内容的例子，并告诉我这是否是你需要的：

 function myFunction() { var x = document.getElementById("hDiv"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } 

 .myButton { background-color: grey; } .hidden { background-color: grey; display: none; margin: 20px; width: 400px; height: 200px; } 

 <button class="myButton"> <div class="row"> <div class="col-12 text-center wow fadeInUp"> <a href="#" class="btn alime-btn btn-2 mt-15" onClick="myFunction()">View More</a> </div> </div> </button> <div id="hDiv" class="hidden"></div>