wesolvethem

I have asked a similar question here but I do not get any solutions or answers from anyone i.e. just statements that point out what is going on so let me rephrase my question:

I am trying to implement this https://www.w3schools.com/howto/howto_js_accordion.asp  into a wordpress site and the expansion is not working. Does anyone know how to make this work properly on wordpress or is it not possible? 

Thanks for the help!

Thank again for the reply. Although the issue is similar--the question is not.

I am looking for an answer not a statement i.e.

"its a wordpress issue, its how wordpress saves the code and adds unwanted paragraphs"  is not an answer nor a solution nor of any help whatsoever. Perhaps "you cannot do this in wordpress" or "you need to do this to fix the issue..." would have been helpful. 

Is there anyone on this site that knows how to fix this or if it cannot be fixed? Again, stating the problem doesn't help me but I appreciate your efforts.

Does anyone know what to do to get https://www.w3schools.com/howto/howto_js_accordion.asp to work with wordpress? I follow the instructions, and it looks correct and the + changes to - but it won't expand and I am not a coder.

Thanks!

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.

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.

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. 

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>