希望按钮隐藏页面加载时的内容，然后在单击按钮时显示

Question

我的按钮类是“手风琴”，但是在加载页面时正在显示应该隐藏的内容。我希望它从隐藏状态开始，然后在单击时显示。

老实说，我已经尝试了很多事情，而且我不记得我从哪里开始。

       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>