Jump to content
wesolvethem

Accordion not expanding

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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 by ddlee202257
Brackets did not display properly

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×