Why Won't My Accordion Class Open Up?

sharingsunshine
sharingsunshine used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Shinesh PremrajanEngineering Manager

Commented:
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

Author

Commented:
that didn't work
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Your markup does not match the example

Firstly you have an error in your script - it has some <p> tags in it that don't belong there.
<script>
var acc = document.getElementsByClassName("accordion");
var i;</p> // <=== WHAT'S THIS DOING HERE? AND ON THE NEXT LINE
<p>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


Secondly, look at that markup for your <button class="accordion">
<p>
  <button class="accordion"><strong>Q. How can I attract birds and butterflies to my yard?</strong></button>
</p>
<div class="panel">
  ...

Open in new window


Now look at the sample code
<button class="accordion">Section 1</button>
<div class="panel">

Open in new window

Notice in your case you have an extra <p> around your button?

When the JavaScript code calls nextElementSibling on your clicked button - its not going to find anything because the button is now a child of the <p> element and the element you are trying to target (<div class="panel">) does not have the <p> as a parent - therefore is not a sibling of the button.

Remove the <p> from around the button (and fix your script)

It is possible to build an accordion without JavaScript if you are interested.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

Author

Commented:
Thanks for the extra answer but it is over my head.  This is my new question - can you post an example?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial