show/hide div overriding css

[Skier88]

How do you override CSS rules with javascript? I'm trying to show/hide a div, which is easy enough, but if the div has "display:none" in its css it doesn't show up when the page runs the same javascript to show it. (I know the css and probably js should be in the head in the examples, I just wanted to shorten the code)

This code does what it's supposed to - starts with the div visible, hides it when the input is blurred, and shows it when the input is focused.

<script type='text/javascript'>
function showTip(a)
{
a.nextSibling.nextSibling.style.display='';
}
function hideTip(a)
{
a.nextSibling.nextSibling.style.display='none';
}
</script>
<input type='text' onfocus='showTip(this);' onblur='hideTip(this);'/>
<div>write good stuff in that box you just clicked on</div>

and this code is supposed to start with the div invisible, show it when the input is focused, and hide it when the input is blurred. but instead it just keeps the div invisible.

<style type='text/css'>
div {display:none;}
</style>
<script type='text/javascript'>
function showTip(a)
{
a.nextSibling.nextSibling.style.display='';
}
function hideTip(a)
{
a.nextSibling.nextSibling.style.display='none';
}
</script>
<input type='text' onfocus='showTip(this);' onblur='hideTip(this);'/>
<div>write good stuff in that box you just clicked on</div>

[Skier88]

I just found a workaround, but I'd still like to solve this problem.

The second behavior described above is my goal, and this code achieves it:

<script type='text/javascript'>
function showTip(a)
{
a.nextSibling.nextSibling.style.display='';
}
function hideTip(a)
{
a.nextSibling.nextSibling.style.display='none';
}
</script>
<input type='text' onfocus='showTip(this);' onblur='hideTip(this);'/>
<div style='display:none;'>write good stuff in that box you just clicked on</div>

Why does this work? And more importantly, how do you do it with a class? (I want to apply this to multiple objects)

[Fotiman]

You are setting the the inline style property of display to an empty string, which essentially just removes the inline style setting (allowing it to inherit the setting from the CSS file). You could set it to 'block' instead and then it would do what you want.

The reason your second example works is because you've set the style property inline to display:none, and then setting it to the empty string just removes that.

I know the css and probably js should be in the head in the examples

Actually, only the CSS. The best place for JavaScript is just before the closing </body> tag.

[Skier88]

Worked great, thanks. That's useful to know - for some reason I used to think all style layers were merged into a single set of attributes on load.

I just googled it, and apparently you can change the class attribute too, although that's unnecessarily complicated.

[edited by: Skier88 at 10:55 pm (utc) on Nov 9, 2010]