Why is the visibility of an element not changing when I add the 'hidden' class?

Question

I'm trying to create a hamburger menu, and the hamburger icon is supposed to change to an 'x' icon when the menu is open. I'm using Tailwind in Astro JS and this is my html:

<div id='hamburger-container' class="flex justify-center w-full sm:hidden">
    <button id='hamburger'><i class="fa-solid fa-bars text-4xl py-4"></i></button>
</div>
<div id='x-container' class="hidden justify-center w-full sm:hidden">
    <button id="x"><i class="fa-solid fa-xmark text-4xl py-4"></i></button>
</div>

and this is my javascript:

    const hamburger = document.getElementById('hamburger');
    const x = document.getElementById('x');
    const hamburgerContainer = document.getElementById('hamburger-container');
    const xContainer = document.getElementById('x-container');

    const btnClick = () => {
        var xIsHidden = xContainer!.classList.contains('hidden');
        if (xIsHidden) {
            hamburgerContainer!.classList.replace('flex', 'hidden');
            xContainer!.classList.replace('hidden', 'flex');
        } else {
            xContainer!.classList.replace('flex', 'hidden');
            hamburgerContainer!.classList.replace('hidden', 'flex');
        }
    }

    hamburger!.addEventListener('click', btnClick);
    x!.addEventListener('click', btnClick);

The issue is that the hamburger buttons remains visible on the screen when I press it. I can see the x disappear and reappear when I toggle it, but the hamburger doesn't.

I can see the classes toggle between hidden and flex for both the #hamburger and the #x elements in the chrome developer window, and the css display property for both elements toggle between flex and none when I click the button, so the problem isn't the styling, it's purely visual.

I also tried swapping them around, by giving the x element the flex class to start off with and the hamburger the hidden class to start with, and the problem switched; the hamburger element would appear and disappear, but the x element would remain on the screen when I made that change.

To note, I have tested this on both Chrome and Edge, so I don't think the problem is browser-specific.

Are all files involved addressed in the content section of your tailwind config? Or in other words: Are all classes you use here parsed by tailwind and have a proper CSS definition? — andreas, Dec 18 '22 at 21:28
@andreas yes, because I can see the changes happening to both the class and the style of the component in the developer window, but it's like the element just doesn't care about that and remains visible. Also, it's the same exact code operating on the other element, and that's working fine. If the element is *initially* `display: none` it works fine, but if it's not initially `display: none` that's when it doesn't work. — Tara, Dec 18 '22 at 22:48

score 1 · Answer 1 · answered Dec 19 '22 at 08:14

Your code should be working correctly (I removed the sm:hidden for demo purposes), so it seems to be a local issue on your end.

Things you can try:

Play around with !hidden class to make sure, it's not an issue concerning specificity or inherited styles
Try in non-chromium browsers (e.g. Firefox)
Check your tailwind config (maybe post it here too?) and main.css for anything related to this

const hamburger = document.getElementById('hamburger');
const x = document.getElementById('x');
const hamburgerContainer = document.getElementById('hamburger-container');
const xContainer = document.getElementById('x-container');

const btnClick = () => {
    var xIsHidden = xContainer.classList.contains('hidden');
    if (xIsHidden) {
        hamburgerContainer.classList.replace('flex', 'hidden');
        xContainer.classList.replace('hidden', 'flex');
    } else {
        xContainer.classList.replace('flex', 'hidden');
        hamburgerContainer.classList.replace('hidden', 'flex');
    }
}

hamburger.addEventListener('click', btnClick);
x.addEventListener('click', btnClick);

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

<div id="hamburger-container" class="flex justify-center w-full">
    <button id='hamburger'><i class="fa-solid fa-bars text-4xl py-4"></i></button>
</div>
<div id="x-container" class="hidden justify-center w-full">
    <button id="x"><i class="fa-solid fa-xmark text-4xl py-4"></i></button>
</div>

Tailwind was auto-configured bc I used the `yarn astro add tailwind` command which basically configures everything for you. I did try your suggestion though of using `!hidden` and testing it on firefox. Sadly that did not fix it. What I wound up doing instead was making both buttons hidden in the html then using javascript to set the hamburger button to flex. It's a bit hackey but it worked. — Tara, Dec 19 '22 at 23:19

Why is the visibility of an element not changing when I add the 'hidden' class?

1 Answers1