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>

The code you posted works fine. Are you getting any errors in the browser's console? — j08691
– j08691, Commented May 21, 2018 at 13:55
No, not at all when I press "Run code snippet". Thank you for your quick answer. It's only on my mother's website it doesn't work. Strange. — tikka56
– tikka56, Commented May 21, 2018 at 14:21
It doesn't show any errors per se, and the appearance seems alright, but the only problem really is that of it being able to open and close it, so in other words, the accordion stays static and non-interactive. I tried with different plug-ins for Javascript, but it still doesn't seem to be responding. — tikka56
– tikka56, Commented May 21, 2018 at 14:27

jdickel · Accepted Answer · 2018-05-21 13:59:50Z

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.

answered May 21, 2018 at 13:59

jdickel

1,4571 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tikka56 Over a year ago

I always use the text view. But you can never be too sure with people! When you say the website "prints" this, how did you find that? The <p> I mean... I was looking for it, and trying to spot it as an error. So that's literally the only thing that was wrong? Thank you for your prompt response by the way!

jdickel Over a year ago

I opened the console and clicked on the error. On firefox it's on F12 i guess? Read up on the chromes developer console: developers.google.com/web/tools/chrome-devtools/console

Collectives™ on Stack Overflow

My Javascript code won't work in Wordpress

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related