CODEWITHSUNDEEP
javascripthtml
Oleg Pittman
Oleg Pittman

Reputation: 61

HTML element displays when set to display: none in CSS

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.

  1. index.html, this is where all my buttons and elements are.
  2. main.js, this is where the function for toggling tabs (I'm trying to create an idol game) is located at.
  3. 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.

Upvotes: 0

Views: 1575

Answers (1)

Willis Blackburn
Willis Blackburn

Reputation: 8204

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 = ''

Upvotes: 3

Related Questions