I'm trying to create a responsive design for a practice website. The situation is that the below menu-icon image is only displayed while width is less than 701 px. So it does that fine. But the problem is that, when menu-icon image is displayed, screen width less than 701 px, I click on the image and nothing happens. The onclick attribute "togglemenu()" does not seem to function. Can someone help please? This is a live site:

https://moortje.github.io/HTML-CSS-Project-Bro-Code/

The menuList and menu-icon in question are at the very bottom.

Here is an HTML snippet.

<ul id="menuList">
    <li><a href="">CSI</a></li>
    <li><a href="">CHP</a></li>
    <li><a href="">HCSS</a></li>
    <li><a href="">JS</a></li>
</ul>
       
<img src="moortje2.png" class="menu-icon" onclick="togglemenu()">
    
<script type="text/javascript">
        
    var menuList = document.getElementById("menuList");
       
    menuList.style.maxHeight = "0px";
      
    function togglemenu(){
        
        if (menuList.style.maxHeight == "0px") {
            menuList.style.maxHeight = "130px";
        }

        else{
            menuList.style.maxHeight = "0px";
            }
    }
        
</script>

Here is a CSS snippet.

.menu-icon{
            width: 25px;
            cursor: pointer;
            display: none ;
           }

@media only screen and (max-width: 700px){
        .menu-icon{
            display: block;
        }
    
        #menuList{
            overflow: hidden;
            transition: 0.5s;
        }
}