Не срабатывает JavaScript функция

Оффтоп javascript
1

Создаю мобильную страницу с выпадающим меню на JavaScript, но функции не работают как надо.

Вот мой JS код:

<script>
window.onload = function () { 
  var mobileNav = document.getElementById('mobileNavigation');
  var menuIcon = document.getElementById('menuButton');
  var closeIcon = document.getElementById('closeButton');
}

function showMenu() {
    mobileNav.style.transition = "height 1s ease 0s";
    mobileNav.style.height = "300px";
    
    menuIcon.style.transition = "opacity 0.4s ease 0s";
    menuIcon.style.opacity = "0";
    menuIcon.style.zIndex = "0";
    
    closeIcon.style.transition = "opacity 0.4s ease 0.4s";
    closeIcon.style.opacity = "1";
    closeIcon.style.zIndex = "1";
}

function hideMenu() {
    mobileNav.style.transition = "height 1s ease 0s";
    mobileNav.style.height = "90px";
    
    menuIcon.style.transition = "opacity 0.4s ease 0.4s";
    menuIcon.style.opacity = "1";
    menuIcon.style.zIndex = "1";
    
    closeIcon.style.transition = "opacity 0.4s ease 0s";
    closeIcon.style.opacity = "0";
    closeIcon.style.zIndex = "0";
}
</script>

А вот HTML разметка:

<div id="menuButton" onclick="showMenu();"></div>
<div id="closeButton" onclick="hideMenu();"></div>

Раньше переменные объявлял прямо внутри функций, но тогда каждая функция срабатывала только один раз. Сейчас вынес их в window.onload, но все равно что-то не так. Подскажите, в чем может быть проблема?