addEventListener to many elements selecting them with class [duplicate]

Question

I dont understand why when i click those elements with class click-to-open this function below does not work im trying to make something like a javascript accordion

document.getElementsByClassName('click-to-open').addEventListener('click', function(){
                document.getElementsByClassName('click-to-open').style.maxHeight = '40px';
                this.style.maxHeigh = '500px';
            });

Answer 1

Try this one :

var clickToOpen=document.getElementsByClassName('click-to-open');

for(var i=0;i<clickToOpen.length;i++){
     clickToOpen[i].addEventListener('click', function(){
                        this.style.maxHeight = '500px';
                    });
}

The method getElementsByClassName() always returns a set of class array, if you want to target all the DOM elements you need to iterate through all of them, if you were using Jquery there is a much more elegant way to do it.

This is a demo: https://jsfiddle.net/2tx2s3rz/2/ showing the code