Javascript按类选择元素，更改其最大高度，然后更改单击的元素的最大高度

Question

因此，在单击时具有单击打开类的每个元素上，我希望具有该类的所有其他元素将其最大高度设置为40px，并将所单击的div最大高度设置为500px，所以我正在尝试做类似acordeon的操作。因此，使用Jquery可以正常工作，但是如何在Vanilla JS中实现它。

 <script>
            $(document).ready(function(){
                $('.click-to-open').on('click', function(){
                    if($(this).css('max-height') == '40px'){    
                        $('.click-to-open').css('max-height', '40px');
                        $(this).css('max-height', '500px');
                    }
                    else{
                        $('.click-to-open').css('max-height', '40px');
                    }
                });             
            });
        </script>

此js脚本有效，但其他语句似乎不起作用Javascript脚本：

(function(){
                var elements = document.querySelectorAll('.click-to-open');
                for(var i = 0; i < elements.length; i++){
                    elements[i].addEventListener('click',setMaxHeight);
                }

                function setMaxHeight(){
                    for(var i = 0;i < elements.length; i++){
                        elements[i].style.maxHeight = '40px';
                    }
                    if(this.style.maxHeight == '40px'){                     
                        this.style.maxHeight = '500px';
                    }
                    else {
                        this.style.maxHeight = '40px';
                    }
                }

            })();

Answer 1

(function(){
    var elements = document.querySelectorAll('.click-to-open');
    for(var i = 0; i < elements.length; i++){
        //Add eventlistener to all elements and check height on click
        elements[i].addEventListener('click',checkMaxHeight);
    }

    function checkMaxHeight(){
        //Set maxheight on all elements to 40px
        for(var i = 0;i < elements.length; i++){
            setMaxHeight(elements[i],40);
        }
        //Check if clicked element has maxheight 40px
        if(this.style.maxHeight == '40px'){
            //Set max height on clicked element to 500px
            setMaxHeight(this,500)
        }
    }

    function setMaxHeight(element,value){
        element.style.maxHeight = value + 'px';
    }
})();