Accordion not expanding

[wesolvethem]

I followed these instructions: https://www.w3schools.com/howto/howto_js_accordion.asp

It looks perfect: https://wesolvethem.com/accordion-sample/

But it doesn't work... :(

I tried dropdown, and other codes and they all worked fine, but, of course the one I want won't work. It works find in the "try it yourself" area but not on my site even though the other codes work.

I am using wordpress, and I deactivated all plugins and also tried different themes with no luck. Could anyone help me?

 

I put this is 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 (-) */
}

 

This in JS

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc.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";
        }
    });
}

 

I used this in the page

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

[ddlee202257]

Your JS is incorrect.  the addEventListener method should have the "i" index attached.

Just change this line of segment code : 

FROM         acc.addEventListener         TO           acc.addEventListener

Happy coding !!!!!

Edited September 4, 2018 by ddlee202257

[ddlee202257]

13 minutes ago, ddlee202257 said:

Your JS is incorrect.  the addEventListener method should have the "i" index attached.

Just change this line of segment code : 

FROM         acc.addEventListener         TO           acc[x].addEventListener      NOTE: replace "x" with "i"

Happy coding !!!!!

sorry change code to this:    acc.addEventListener

Edited September 4, 2018 by ddlee202257
Brackets did not display properly

[dsonesuk]

IF you don't use "<>" code box to enter your code, and you enter as text, when your code has [ i ] (without spaces) its treated as italic formatting code this is removed and everything following it becomes italic on submission.

Edited September 4, 2018 by dsonesuk

[dsonesuk]

Its not a website page! its a page that a browser had tried to interpret as proper html, JavaScript and failed!

validate then it might work

https://validator.w3.org/check?uri=https%3A%2F%2Fwesolvethem.com%2Faccordion-sample%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

I can't see any reference to accordion JavaScript code, it might have just given up on getting that far, as it had crashed and burned.

Make sure you save html as UTF encoded, cause that is another possible reason for your issues your having.

[wesolvethem]

Thank you for the reply's!

 

The code found here: https://www.w3schools.com/howto/howto_js_accordion.asp is exactly what I put in. Some of the data was lost in the 'copy/paste' on here because I didn't do it right....

 

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

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> 

 

I followed the instructions, and they worked for every example I tried except this particular accordion example--which is the one I want. My story...

Any help is greatly appreciated. 

[dsonesuk]

When the page is loaded it reads from top to bottom, IF JavaScript is reached and runs, the code that refers to an id or class name before the elements using these identifiers have been read/rendered it will throw an error as being 'undefined' i.e. they don't exist Yet!.

This is overcome by placing the code below the html they refer to or placing it in a JavaScript/Jquery onload event code which will not run the code until the page is fully rendered.

THIS HAS BEEN FIXED

Edited September 5, 2018 by dsonesuk

[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.