Javascript not opening/closing accordion

I've tried a few different ways but can not tell why my.JS isn't opening and closing my accordion. Please check my code. Your help would be appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var acc = document.getElementsByClassName("accordion");

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";
    }
  });
}

/*this javascript seems to be fine and matches what some answers have said, and i've reset the page cache but i cannot seem to get it to work */
<!-- language: lang-html -->

<div class="wrap1">
  <button class="accordion">About Us Page Map</button>

  <div id="pan1" class="panel">
    <p>

      <a href="About.html" id="ppl">Personel section</a><br />
      <a href="About.html" id="ach">Acheivments</a><br />
      <a href="About.html" id="his">History</a><br />
    </p>
  </div>
</div>

<!-- language: lang-css -->

body {
    text-align: center;
    background-color: #ffffff;
}

h1 {
    font: 40px courier new;
    text-align: center;
}
a {
    font: 25px arial;
    text-align:center;
}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 60%;
    text-align: center;
    border: none;
    outline: none;
    transition: 0.4s;

}
.active, .accordion:hover {
    background-color: #ccc;
}

.panel {
    padding: 0 18px;
    background-color: white;
    overflow: hidden;
    font: 16px Source Sans Pro;
    width:60%;
    margin:0 auto;
    display:none;
    height:200px auto
    
}

p{
    text-align:center;
}

<!-- end snippet -->
I've added the css, i do have a class called accordion but it didn't show in the original question sorry!

The problem is here:

var acc = document.getElementsByClassName("accordion");

You don't have "accordion" class in your HTML file, that's why it is not able to recognize it. You have to take a button, assign it a class named accordion and then it will work properly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var acc = document.getElementsByClassName("accordion");

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";
    }
  });
}

<!-- language: lang-css -->

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<!-- language: lang-html -->

<button class="accordion">Personal</button>
<div class="panel">
  <p>Personal here</p>
</div>

<button class="accordion">Achievements</button>
<div class="panel">
  <p>Achievements here</p>
</div>

<button class="accordion">History</button>
<div class="panel">
  <p>History here</p>
</div>

<!-- end snippet -->

Source: HTML and CSS Accordion - w3schools

Hope this helps.

I would suggest refactoring some of your code to make it more readable such as

HTML

<a href="#item1" class="accordion">Item 1</a>
<div id="item1" class="accordion-content">This is my accordion Item 1 content</div>

<a href="#item2" class="accordion">Item 2</a>
<div id="item2" class="accordion-content">This is my accordion Item 2 content</div>

JS

document.querySelectorAll(".accordion").forEach(function(node) {
    node.addEventListener("click", function(e) {
        this.nextElementSibling.toggleClass("active');
    });
});

CSS

.accordion-content:not(.active) {
    display: none;
}

Besides the refactor, I'm unable to see an element with the className accordion. It seems you are missing the HTML containing the actual accordion.