Script to Show/Hide Content Requires Two Clicks to Execute First Time
<p>We're using the following code to show/hide content when an image is clicked:</p>

<pre><code>  function toggle(image,list)
  {
    var listElementStyle=document.getElementById(list).style;
    if (listElementStyle.display=="none")
    {
      listElementStyle.display="block";
      document.getElementById(image).src="images/down.png";
      document.getElementById(image).alt="Close list";
    }
    else
    {
      listElementStyle.display="none";
      document.getElementById(image).src="images/up.png";
      document.getElementById(image).alt="Open list";
    }
  }
</code></pre>

<p>The function is invoked like this:</p>

<pre><code>&lt;p&gt;
&lt;img src="images/up.png" alt="Open List" id="img39384" onClick="toggle('img39384','ul39384');"&gt;Agriculture
&lt;ul id="ul39384" class="catList"&gt;
&lt;li&gt;
&lt;a href="databases.jsp?cat=39386"&gt;Agriculture - Most Useful&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/p&gt;
</code></pre>

<p>The first time an "up.png" is clicked, it takes two distinct click to fire-off the script and show/hide content.  After that first two-click invocation, a single click will fire the script.  This behavior holds true in all browsers--IE, Firefox, Opera, Safari, and Chrome.</p>

<p>What could be causing this behavior?</p>
