Class added by javascript but css not applied? [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed last year.

Improve this question

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>

soley caused by typos. For ocne your CSS class is menu-slier while in JS you toggle menu-slider — tacoshy
– tacoshy, Commented Apr 8, 2024 at 10:25
Use your browser devtools inspect facility to see exactly what css is being applied and from where and also to check there are no errors shown on the console. — A Haworth
– A Haworth, Commented Apr 8, 2024 at 10:27

asd qwe · Accepted Answer · 2024-04-08 10:29:32Z

-2

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

answered Apr 8, 2024 at 10:29

asd qwe

685 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhamu Over a year ago

no it's not working both classes i have applied but nothin happen

tacoshy Over a year ago

you should never answer on questions tha are soelyl cause by typos but comment don't hem instead and flag them as such for closure!

Collectives™ on Stack Overflow

Class added by javascript but css not applied? [closed]

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related