function needs extra click to start

[kn0wl3dg3]

Hoping you guys can help...

 

I've got this html:

<h3 onclick="change('screens')" class="clickable">Biometric Screenings</h3>
<ul id="screens">
<li>List item number 1</li>
<li>List item number 2</li>
<li>List item number 3</li>
</ul>

 

And this javascript function:

function change(id) {
if (document.getElementById(id).style.display=='none') {
	document.getElementById(id).style.display='block';
} else {
	document.getElementById(id).style.display='none';
}
}

 

This is the css:

#screens {
     display:none;
}

 

This is just a header that will show a list when clicked on...very simple.

This works just fine except it requires an extra click before it will operate and then it works normally until you refresh/leave.

 

Any ideas why that is and how to get rid of it?

[brianlange]

If you add an inline style to the ul it will work. I'm not sure why the javascript can't pick up the display property from the css declaration.

 

<ul id="screens" style="display: none;">
    <li>List item number 1</li>
    <li>List item number 2</li>
    <li>List item number 3</li>
</ul>

[kn0wl3dg3]

If you add an inline style to the ul it will work. I'm not sure why the javascript can't pick up the display property from the css declaration.

 

<ul id="screens" style="display: none;">
    <li>List item number 1</li>
    <li>List item number 2</li>
    <li>List item number 3</li>
</ul>

 

Thanks for the response!

 

Sorry, maybe I was unclear about my exact issue...it does work, but I have to click once on it before it will work (so i click, then click again and it works)

 

I'll try what you suggested though...right after lunch

[kn0wl3dg3]

If you add an inline style to the ul it will work. I'm not sure why the javascript can't pick up the display property from the css declaration.

 

<ul id="screens" style="display: none;">
    <li>List item number 1</li>
    <li>List item number 2</li>
    <li>List item number 3</li>
</ul>

 

My mistake, you were right, I guess I was misunderstanding.

 

Strange as it is, that seemed to take care of the extra click...thank you very much!! 

 

Now my question becomes: why is it doing that/how do I fix it so it will grab from the css file easier? I'd rather not define it inline if I can avoid it.

 

Thanks again brianlange