SquareSpace | How to Add an (FAQ) Accordian

HTML====
<button class="accordian">
  Section 1
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>
<button class="accordian">
  Section 2
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>
<button class="accordian">
  Section 3
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>

CSS====
<style>
  
  .accordian {
           background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
  }
  
  .panel {
       padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
  }
  
  .active, .accordian:hover {
           background-color: #ccc; 
  }
  
  .accordian:after {
           content: '\02795';
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 5px;
  }
  
  .accordian.active:after {
           content: '\02796'; 
  }

</style>

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

</script>