[headbirth]

Any ideas why this link I created takes two clicks to activate?

JS code for link:

function toggleID(whichOne) {
switch(whichOne) {

case 56:
if (document.getElementById("newsContent1").style.dis play != "none") {
document.getElementById("newsContent1").style.disp lay = "none";
document.getElementById("newsItem1").className = "caseBoxTop";
} else {
document.getElementById("newsContent1").style.disp lay = "block";
document.getElementById("newsItem1").className = "caseBoxBottom";
}
break;

html code:

<p id="newsItem1" class="caseBoxTop"><a class="caseBox3" href="javascript:toggleID(56);"><span class="caseStudyD">(Jul|3|04)</span><span class="caseStudyA">Human To Human</span></a></p>

<p id="newsContent1" class="newsItemHidden"><img src="Site/Art/Navigation/newsMarker.jpg" alt="" border="0"> <span class="caseNotes">Notes</span> <span class="briefBody">A very quickly planned publication on a tight deadline; design, and production were approched with this in mind. The look of this publication was kept clean, but bold and appealing to simplify the production process. A very quickly planned publication on a tight deadline; design, and production were approched with this in mind. The look of this publication was kept clean, but bold and appealing to simplify the production process.</span></p>

[headbirth]

This might help:

http://home.earthlink.net/~headbirth/Test/h1.html

If you click on news > and then click on one of the Human2Human items, you'll see that it takes a couple of clicks to get the link to work.

[Simon Mundy]

My guess is that the 'display' attribute is not actually set to 'none' as you expected, and that the way your conditional is set up that is it will always default to setting the DIV to 'none' the first time you click it.

I haven't got enough time to test this properly, but I'd try altering the code to add an alert like:

Code:
alert('Current state is '+document.getElementById("newsContent1").style.display);

just before your conditional.

See how that goes

[Chris O'Brien]

If the display is set in a class, then the .style.display won't actually be set. So what you are seeing is that although the div is actually hidden, it's hidden by CSS but not in a style tag, hence .style.display at this point is empty. Make sense?

So, the conditional `!= "none"' is met, because "" != "none" on the first pass. It then will have a .style.display of "none" the next time round - hence the two click's needed; the first click getting the ball rolling.

Since you are wanting to get it to display the hidden content on the first click, just shift things round:

Code:
if (document.getElementById("newsContent1").style.display != "block") {
    document.getElementById("newsContent1").style.display = "block";
    document.getElementById("newsItem1").className = "caseBoxBottom";
} else {
    document.getElementById("newsContent1").style.display = "none";
    document.getElementById("newsItem1").className = "caseBoxTop";
}

[headbirth]

You were right Black Book! I just had it backwards.
My thanks to both of you for your help!