CSS + JS + HTML Accordion Not Working

[wesolvethem]

I have tried multiple examples from W3Schools on my site https://wesolvethem.com/accordion-sample/, and they all worked except the following, which is the one that I want (or at least one that looks identical). 

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

 

HTML:

 <button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div> 

CSS:

 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
} 
.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

JS:

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

 

Also, I am not sure what to do with this piece "Animated Accordion (Slide Down)" or why it is there.

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

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

 

Note: When I changed the location of the JS to footer from header, the +/- functions started working but still no expansion of the accordion.

[dsonesuk]

ITS Wordpress! It adds a paragraph round the button, so when the code tells it to go to next sibling element, it does not exit because it is the only child element within the paragraph, the div with class 'panel' is outside the paragraph and no longer a sibling to the button, so it fails.

[wesolvethem]

Thanks for your help but I still am not sure what you are recommending I do? I am not a coder of any sort so I am trying to figure this out for the first time.

[dsonesuk]

Wordpress has the tendency of adding unwanted paragraph tags on saving, by adding these paragraph tags around the buttons its causing the JavaScript code to fail.

What you require for accordion to work

<div class="czr-wp-the-content">
 
    <button class="accordion">Section 1</button>
  
    <div class="panel">
    <p>Lorem ipsum…</p>
    <p>Lorem ipsum…</p><p>
    Lorem ipsum…</p>
  </div>

    <button class="accordion">Section 2</button>

  <div class="panel">
    <p>Lorem ipsum…</p>
  </div>
 
    <button class="accordion">Section 3</button>
 
  <div class="panel">
    <p>Lorem ipsum…</p>
  </div>
</div>

The <div class="panel"> MUST directly follow the button, its hierarchy makes it a sibling to the button with

var panel = this.nextElementSibling;

JavaScript referring to next sibling of button the div class panel.

What Wordpress does on saving

<div class="czr-wp-the-content">
  <p> 
    <button class="accordion">Section 1</button>
  </p>
    <div class="panel">
    <p>Lorem ipsum…</p>
    <p>Lorem ipsum…</p><p>
    Lorem ipsum…</p>
  </div>
  <p>
    <button class="accordion">Section 2</button>
  </p>
  <div class="panel">
    <p>Lorem ipsum…</p>
  </div>
  <p>
    <button class="accordion">Section 3</button>
  </p>
  <div class="panel">
    <p>Lorem ipsum…</p>
  </div>
</div>

Totally breaks the JavaScript code.

You can change settings in wordpress to prevent this happening, but i can't remember where, just google about 'unwanted paragraphs in wordpress'