My Javascript code won't work in Wordpress

Question

I have absolutely no idea how to follow the instructions to "ident" the code, so I'm just gonna post it here, if that's alright.

Anyway, I am working on my mother's website on Wordpress in order to help her out, and I am trying to create an "accordion" for her FAQ list. I have taken a template from W3 schools, which I use often, See here for what I am trying to create... https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

I am able to use HTML and CSS, but I'm not that sure on how to make Javascript work in the code that I applied. The result is an accordion that is non-interactive. This is how it ended up on the dummy page of my mother's website... http://www.andreeharpur.com/student-faqs-dummy-page/

I am stuck after trying to create separate .js files, as well as use shortcode to upload to Wordpress in order to keep the page loading from slowing down, but I'm really stuck at this stage. I just don't know what I'm doing anymore.

At this stage, a little guidance would be hugely appreciated!

Is any of this code "off" to you? Did I screw up anywhere How can I correct it and learn my lesson next time?

Sorry if I appear stupid here to you programming wizzes, I'm just really keen to learn as best I can by applying it. That's how I learn best.

Thank you, here's the code I applied for the accordion to my mother's website below...

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.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.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;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Answer 1

You code itself is working fine. But the website prints this

var acc = document.getElementsByClassName("accordion");
var i;</p>

There is a <p> (html) tag in your javascript. Make sure to use the "text" view of wordpress. Not the visual view if you insert source code.