Class added by javascript but css not applied?

I am going to create a toggle menu using javascript and css A class .menu-slider add with property display blok. But it's not working only class teggled and css not applied Here is the code

<script>
    const toggleMenu = document.querySelector('.toggl-menu');
    document.getElementById("toggleButton").addEventListener("click", function() {
        var button = this;
        toggleMenu.classList.toggle('menu-slider');
        button.classList.toggle("open");
        button.classList.toggle("close");
        var openIcon = button.querySelector(".open-icon");
        var closeIcon = button.querySelector(".close-icon");
        if (button.classList.contains("open")) {
            openIcon.style.display = "inline";
            closeIcon.style.display = "none";
        } else {
            openIcon.style.display = "none";
            closeIcon.style.display = "inline";
        }
    });
</script>

<style>
    .toggl-menu {
        display: none;
        position: absolute;
        padding-top: 1rem;
        padding-bottom: 1rem;
        align-items: center;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        width: 100%;
        background-color: #ffffff;
        left: 0;    
        top: 70px;
    }
    .menu-slier{
        display: block;
        transition-duration: 500ms;
    }
</style>

Perhaps the fact is that in your JS you are toggle the menu-slider class, but in css you have .menu-slier