Overriding CSS style 'display:none' in javascript

Question

I'm trying to add a checkbox toggle that hides and shows list elements by changing their style display attribute from "none" to "inline", but it's not working. I'm setting the attribute's style to "display:none" in the CSS file. Then I set it to "display:inline" in javascript when someone checks a box. The javascript is successfully changing the element's property to inline, but for some reason the element remains invisible.

If I do the opposite, by setting the display to inline in the CSS and overriding it to none in the javascript, it works fine. I don't see why this would work one way but not the other.

I'm using chrome. Here is the code. Any feedback is appreciated.

CSS file:

#tabmenu li[status='disabled'] a, a.active, #disabled { 
    color: #777777; 
    background: #DDDDDD;
    font: normal 1em Arial; 
    border: 1px solid black; 
    border-radius: inherit;
    padding: 0px 5px 0px 5px; 
    margin: 0px; 
    text-decoration: none;
    cursor:hand; 
    display:none;
} 

HTML:

<ul id="tabmenu">       
    <li name='tab' id='tab1' selected='no' status='disabled'></li>      
</ul>

JAVASCRIPT (from command line, or onchange of a checkbox)

tab = document.getElementById('tab1');
tab.style.display = 'inline';

UPDATE: I know that I could just move the "display: none" out of the css and have it set to none on page load with javascript. But if I do it that way, it will be hiding them after page load, which means, on slower computers, the user could see them flash briefly into visibility. That's why I'm using css to set the initial state, then trying to override it when the box is checked or unchecked.

UPDATE 2: Let me emphasize that if I set the element to visible in css, then hide it on change of the check box, this code works fine. But if the element is initially set to invisible in css, the checkbox is not able to make the element visible. So it appears to be a problem where css "display: none" can't be overridden after page load, but css "display: inline" can.

Answer 1

Your CSS is hiding an a element within the tab, not the tab itself:

#tabmenu li[status='disabled'] a {
}

Changing the tab's style won't undo that.

If your CSS was instead:

#tabmenu li[status='disabled'], a.active, #disabled {
  ...
}

then changing the display would be useful.

Answer 2

You've set the a element inside the li to be hidden, so setting the tab to be visible isn't enough. Setting the container (the li) visible won't make the content (the a) visible.

You probably want to change your rule to

#tabmenu li[status='disabled'], a.active, #disabled { 

Answer 3

CSS targets <a> tags hidden, javascript is changing an <li>, the child <a> would still be hidden

Answer 4

you should have function that will check state of a checkbox I've added it to markup

<ul id="tabmenu">       
<li name='tab' id='tab1' selected='no' status='disabled'>some text</li>      
</ul>
<label>
<input type="checkbox" id="check"/>show text
</label>

Then next code will check the state of your checkbox and will change visibility of tab

$(function () {     //document ready
$('#check').click(display); //onclick checkbox display() will be performed, do not use onchange as you'll get in troubles with IE

function display(){
tab=document.getElementById('tab1');
checkbox=document.getElementById('check')
if (check.checked){
tab.style.display = 'inline';
}
else{
tab.style.display='none';   
}
console.log(tab.style.display)
}
});

Or try to play here http://jsfiddle.net/766Nb/ P.s: on jsfiddle I've cleaned up css a bit

Answer 5

For hidde element li you need tab.style.display='none'; and for show element li you need tab.style.display='list-item';.

Then the necessary code it's this:

JAVASCRIPT

function llm()
{
        tab = document.getElementById('tab1');
    if (document.getElementById('Check1').checked==false)
    {
        tab.style.display = 'none';
    }
    else
    {
        tab.style.display='list-item';
    }
}

HTML

<input type="checkbox" id="Check1" name="vehicle" value="Car" onclick="LLM();"> Checked
<ul id="tabmenu">       
    <li name='tab' id='tab1' selected='no' status='disabled'></li>      
</ul>

CSS

#tabmenu li[status='disabled'] a, a.active, #disabled { 
    color: #777777; 
    background: #DDDDDD;
    font: normal 1em Arial; 
    border: 1px solid black; 
    border-radius: inherit;
    padding: 0px 5px 0px 5px; 
    margin: 0px; 
    text-decoration: none;
    cursor:hand; 
    display:none;
} 

I think it's not possible to do only with css. If you need more help notify me.

Answer 6

Look this way, maybe you can solve your problem using these steps:

Create a .visible class on the css with this code:

.visible {
  display: inline !important;
}

And create another class .hidden:

.hidden {
  display: none !important;
}

And then, use this code to Hide your element:

tab = document.getElementById('tab1');
tab.className = 'hidden';

And this code to Show your element:

tab = document.getElementById('tab1');
tab.className = 'visible';

Important: with this solution you can start with display:none on the CSS without having problems to set visible after, because the !important tag on the classes overwrite all, so you will not have problem to hide it.