Why is the javascript not working on all referenced IDs
<p>I'm working on a Joomla website. Now I need a slider to change when someone hovers over a text link. I'm using some javascript. It's working on the first div with the id=slider, but not on the second div with id=slider in the article. Can someone tell me why it's doing this?</p>

<p>I'm using the following code in a custom code module for Joomla.</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=iso-8859-1"&gt;
    &lt;title&gt;Untitled Page&lt;/title&gt;
    &lt;style type="text/css" media="screen"&gt;
      &lt;!--
      .boxVisible {
        background-color: #eee;
        display: block;
        padding: 5px;
        float: left;
        border: solid 1px #000040
      }
      .boxHidden {
        display: none;
      }
      --&gt;
    &lt;/style&gt;
    &lt;script type="text/javascript"&gt;
      &lt;!--
      function showHide(slider) {
        theBox = document.getElementById(slider);
        if (theBox.className == "boxVisible") {
          theBox.className = "boxHidden";
        } else {
          theBox.className = "boxVisible";
        }
      }
      //--&gt;
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body bgcolor="#ffffff"&gt;
    &lt;p&gt;&lt;a href="link.html" onmouseover="showHide('slider'); return false;"&gt;More&lt;/a&gt;&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>This is my article:</p>

<pre><code>&lt;div id="slider" class="boxVisible"&gt;{loadposition slider1}&lt;/div&gt;
&lt;div id="slider" class="boxHidden"&gt;{loadposition slider2}&lt;/div&gt;
&lt;p&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; {loadposition java}&lt;/p&gt;
</code></pre>
