HTML element displays when set to display: none in CSS

Question

I have a div element that is supposed to be set to display: none by default, but it isn't. It's like the entire .css statement was ignored.

I have 3 files.

index.html, this is where all my buttons and elements are.
main.js, this is where the function for toggling tabs (I'm trying to create an idol game) is located at.
style.css, this is where small bit of css is located at. I have tried including the css into the main index.html, I have tried using the <style> and </style> tags to surround my css and it still doesn't work.

My css file looks something like this:

.hide {
    display: none;
}

My include statement looks like this:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

My div elements look like this:

<div id="ees" class="hide">
    <h3>Events</h3>
    <span id="log">No events have occured yet</span>
</div>

My JS function for switching tabs looks like this:

function toggle_tab(tabname) {
    if(document.getElementById(tabname).style.display == "none")
        document.getElementById(tabname).style.display = "block";
    else
        document.getElementById(tabname).style.display = "none";
}

My button to trigger the event looks like this:

<button onclick="toggle_tab('ees');">Events</button>

The result when running the code is quite weird. The button works, only after pressing it twice instead of once (remember, it is supposed to be set to none by default and pressing it once should reveal it's content). After that, it works fine, but you need to press it twice upon page load, which is an issue. I added this to the function to see what's happening and here are the results:

function toggle_tab(tabname) {
    console.log("Display: "+document.getElementById(tabname).style.display);
    if(document.getElementById(tabname).style.display == "none")
        document.getElementById(tabname).style.display = "block";
    else
        document.getElementById(tabname).style.display = "none";
}

Here is how the output looks when the first time the button is triggered upon page load.

Display:

That's it. It's like the display: none is ignored in my css class definition. What I would like is for the console to show display: none when the page loads. This will show a button's content the first time somebody chooses to activate it as well, as the default value will be none upon the beginning of the interaction.

You should not have spaces between HTML attributes, = and their values. For example <div id = "ees" class ="hide"> should be <div id="ees" class="hide">. — Minding
– Minding, Commented Jul 21, 2019 at 22:55

Willis Blackburn · Accepted Answer · 2019-07-21 23:12:05Z

3

You're initially setting the CSS display attribute of the div element using via the CSS class hide. But when you check whether or not it's hidden, you're looking at the display attribute of the div element's style attribute, which is not the same as checking the CSS class. The div acquires the display: none setting from the CSS class hide, but it does not have that setting in its own style attribute.

It works after the first time because you set the display attribute of the div directly, and after that, your test works.

If you load your page, open the JavaScript console, and enter:

document.getElementById('ees').style.display

you'll see that it evaluates to an empty string, not "none".

Probably what you want to be doing is toggling the hide class of the element, instead of the display attribute of its own style.

Hide element:

document.getElementById('ees').className = 'hide'

Show it again:

document.getElementById('ees').className = ''

edited Jul 21, 2019 at 23:12

answered Jul 21, 2019 at 22:57

Willis Blackburn

8,25422 silver badges40 bronze badges

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

1 Comment

Minding Over a year ago

You mixed the class hide up with the CSS statement display: none;. (Answer is still correct)

Collectives™ on Stack Overflow

HTML element displays when set to display: none in CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related