title: How can I properly hide a list of XSL processed XML elements using javascript
body: <p>Good morning.  I have an XML file which contains lists of warning and errors from a build output.  I have successfully been able to write XSL to iterate over the separate lists of warnings and errors to have them display in my browser.  What I'd like to do next would be to add a bit of javascript in order to add a link/button to be able to toggle the display of the warnings.  I can't get it to work properly.</p>
  
  <p>here is the relvant code (trimmed down to what I hope are the essentials)</p>
  
  <pre><code>&lt;xsl:template match="/"&gt;
      &lt;xsl:variable name="messages" select="/cruisecontrol//buildresults//message" /&gt;
      &lt;xsl:variable name="warning.messages" select="$messages[(contains(text), 'warning ')) or @level='Warning']" /&gt;
      &lt;xsl:variable name="warning.messages.count" select="count($warning.messages)" /&gt;
      &lt;xsl:if test="$warning.messages.count &gt; 0"&gt;
          &lt;script type="text/javascript"&gt;
              function toggleWarnings() {
                  eDiv = document.getElementById("warnings");
                  tDiv = document.getElementById("warningsTitle");
                  if ( eDiv.style.display == "none" ) {
                      eDiv.style.display = "inline";
                      tDiv.innerText = "Hide Warnings";
                  } else {
                      tDiv.innerText = "View Warnings";
                      eDiv.style.display = "none";
                  }
              }
          &lt;/script&gt;
          &lt;table&gt;
              &lt;tr&gt; &lt;td&gt;
                  &lt;a href="javascript:void()" onclick="javascript:toggleWarnings(); return false;"&gt;
                     &lt;span id="warningsTitle"&gt;View Warnings&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/td&gt; &lt;/tr&gt;
              &lt;xsl:for-each select="$warning.messages"&gt;
                  &lt;tr&gt; &lt;td class="warning" id="warnings" style="display: none;"&gt;
                      &lt;xsl:value-of select="."/&gt;
                  &lt;/td&gt; &lt;/tr&gt;
              &lt;/xsl:for-each&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>The problemt that I have is that only one warning is ever displayed after hitting the "view warnings" link.  My problem is that I know enough HTML, XSL, and javascript to be slightly dangerous and the combination is proving that I don't know enough :-)</p>
  
  <p>Is there an easy way for me to iterate over XSL elements, display then in a table and also be able to hide all of those elements under a link toggle?</p>
  
  <p>Thanks.</p>