CODEWITHSUNDEEP
javascripthtmlcss
hrhsii
hrhsii

Reputation: 157

onclick is not working with document.getElementsByClassName

I have an accordion menu I am using for product descriptions in a CMS I am trying to develop javascript/css/html to speed up my data entry by having the same class name encapsulate my sections and subsections. I saw it on another website and thought it was cool, but I cannot get it to work.

E.g all sections like this:

<button class="accordion_f">Section 1 Title</button>
<div class="panel">
 <button class="accordion_f">Section 1 Subsection Title</button>
 <div class="panel">
 Section 1 contents</div>
<button class="accordion_f">Section 2 Title</button>
<div class="panel">
 <button class="accordion_f">Section 2 Subsection Title</button>
 <div class="panel">
 Section 2 contents</div>
 And so on...

Section 1
 Section 1 contents
 Section 1 contents
Section 2 
 Section 2 contents
 Section 2 contents
And so on

This way I can cut and paste content without worrying about specific div id names.

css

    <style>
button.accordion_f {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 14px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion_f.active, button.accordion_f:hover {
    background-color: #ddd;
    color: blue;
}

button.accordion_f:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;       
    margin-left: 5px;  
}

button.accordion_f.active:after {
    color: blue;
    content: "\2796";
}

div.panel {
    padding: 0 14px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 6000px;  
}
</style>

JavaScript

<script>
var acc = document.getElementsByClassName("accordion_f");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");       
    }
}
</script>

When I tested it in isolation it worked correctly

If I encapsulate menu in another class for example in a pill menu onclick will not work, it will not expand the menu, the css seems to work, the background shading etc, when I inspect the element I do not see the script, is the parent class affecting document.getElementsByClassName some how?

<ul class="tabs">
<button class="accordion_f">Section 1</button>
<div class="panel">
<p>Offers an easy way to connect your Polar training device with 3<sup>rd</sup> party services.</p>
</div>
</ul>

Onclick not firing...

I have manually expanded the menu's with various index numbers to test my menus:

acc[0].classList.toggle("active");
acc[0].nextElementSibling.classList.toggle("show");

This works so I am puzzled why onclick is not working.

Please help.

Upvotes: 0

Views: 504

Answers (1)

hrhsii
hrhsii

Reputation: 157

It is working, I.E was in compatibility mode and ie8 had poor support for document.getElementsByClassName

Upvotes: 0

Related Questions