Link to home
Start Free TrialLog in
Avatar of sharingsunshine
sharingsunshineFlag for United States of America

asked on

Why Won't My Accordion Class Open Up?

I have a page I put the code on to have the accordion style of FAQ's at http://www.henricomg.org/garden-advice/

Unfortunately, it won't open up.  I am not familiar with how to troublehoot javascript issues in Chrome.

I followed the directions from this article:

https://www.w3schools.com/howto/howto_js_accordion.asp

Please help me to understand why the accordion won't open up.
Avatar of Shinesh Premrajan
Shinesh Premrajan
Flag of India image

The page is missing the javascript code which invokes the accordian, seems missing in the page. Please add these at the bottom of the page
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

Open in new window

Avatar of sharingsunshine

ASKER

that didn't work
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I see what you are pointing out and that answers my question on why it won't work.  Unfortunately, Wordpress is adding those automatically.  So, I don't even see them in the code portion of the page.

Yes, I am interested so I will post a new question.
To create an accordion without JS you use a hidden <input type="checkbox"> control. You can then use CSS using the sibling operator and the checked status of the input to hide / show the accordion.
Thanks for the extra answer but it is over my head.  This is my new question - can you post an example?