title: Trying to add some javascript to xslt file so that table can be hidden or shown
body: <p>this is my first ever question. Sorry if it's a dumb one but I've been trying to do this all afternoon without any joy.</p>
  
  <p>I have some XML that looks like this</p>
  
  <p>XML:</p>
  
  <pre><code>    &lt;?xml version="1.0"?&gt;
      &lt;?xml-stylesheet type='text/xsl' href='style.xslt'?&gt;
      &lt;LogFileProcessing&gt;
      &lt;Test&gt;
      &lt;Script&gt;
          &lt;Name&gt;Test 1&lt;/Name&gt;
          &lt;Results&gt;
              &lt;RunResult&gt;
                  &lt;RunNumber&gt;1&lt;/RunNumber&gt;
                  &lt;Outcome&gt;Pass&lt;/Outcome&gt;
                  &lt;StartTime&gt;10:42:25&lt;/StartTime&gt;
                  &lt;EndTime&gt;10:43:58&lt;/EndTime&gt;
                  &lt;Date&gt;25/03/2014&lt;/Date&gt;
                  &lt;Duration&gt;93 seconds&lt;/Duration&gt;
              &lt;/RunResult&gt;
              &lt;RunResult&gt;
                  &lt;RunNumber&gt;2&lt;/RunNumber&gt;
                  &lt;Outcome&gt;Pass&lt;/Outcome&gt;
                  &lt;StartTime&gt;10:44:03&lt;/StartTime&gt;
                  &lt;EndTime&gt;10:45:13&lt;/EndTime&gt;
                  &lt;Date&gt;25/03/2014&lt;/Date&gt;
                  &lt;Duration&gt;70 seconds&lt;/Duration&gt;
              &lt;/RunResult&gt;
          &lt;/Results&gt;
      &lt;/Script&gt;
      &lt;Script&gt;
          &lt;Name&gt;Test 2&lt;/Name&gt;
          &lt;Results&gt;
              &lt;RunResult&gt;
                  &lt;RunNumber&gt;1&lt;/RunNumber&gt;
                  &lt;Outcome&gt;Pass&lt;/Outcome&gt;
                  &lt;StartTime&gt;10:45:17&lt;/StartTime&gt;
                  &lt;EndTime&gt;10:46:37&lt;/EndTime&gt;
                  &lt;Date&gt;25/03/2014&lt;/Date&gt;
                  &lt;Duration&gt;80 seconds&lt;/Duration&gt;
              &lt;/RunResult&gt;
              &lt;RunResult&gt;
                  &lt;RunNumber&gt;2&lt;/RunNumber&gt;
                  &lt;Outcome&gt;Pass&lt;/Outcome&gt;
                  &lt;StartTime&gt;10:46:41&lt;/StartTime&gt;
                  &lt;EndTime&gt;10:47:49&lt;/EndTime&gt;
                  &lt;Date&gt;25/03/2014&lt;/Date&gt;
                  &lt;Duration&gt;68 seconds&lt;/Duration&gt;
              &lt;/RunResult&gt;
          &lt;/Results&gt;
      &lt;/Script&gt;
  &lt;/Test&gt;
  </code></pre>
  
  <p></p>
  
  <p>and here is the xsl file I am using to transform it</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="UTF-8"?&gt;
          &lt;html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
          &lt;body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE"&gt;
          &lt;xsl:for-each select="LogFileProcessing/Test/Script"&gt;
              &lt;div style="font-family:Arial;background-color:teal;color:white;padding:4px"&gt;
              &lt;span style="font-family:Arial;font-weight:bold"&gt;&lt;xsl:value-of select="Name"/&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div style="font-family:Arial;margin-left:75px;margin-bottom:1em;font-size:10pt"&gt;
              &lt;p&gt;
          &lt;table border="1"&gt;
                  &lt;tr style="color:white" bgcolor="Teal"&gt;
                  &lt;th&gt;Run&lt;/th&gt;
        &lt;th&gt;Date&lt;/th&gt;
        &lt;th&gt;Start Time&lt;/th&gt;
        &lt;th&gt;End Time&lt;/th&gt;
        &lt;th&gt;Duration&lt;/th&gt;
        &lt;th&gt;Pass/Fail&lt;/th&gt;
        &lt;th&gt;Reason&lt;/th&gt;
      &lt;/tr&gt;
      &lt;xsl:for-each select="Results/RunResult"&gt;
      &lt;tr&gt;
        &lt;xsl:choose&gt;
          &lt;xsl:when test="Outcome = 'Fail'"&gt;
            &lt;td bgcolor="Red"&gt;
            &lt;xsl:value-of select="RunNumber"/&gt;
            &lt;/td&gt;
          &lt;/xsl:when&gt;
          &lt;xsl:otherwise&gt;
            &lt;td bgcolor="White"&gt;&lt;xsl:value-of select="RunNumber"/&gt;&lt;/td&gt;
          &lt;/xsl:otherwise&gt;
        &lt;/xsl:choose&gt;
        &lt;xsl:choose&gt;
          &lt;xsl:when test="Outcome = 'Fail'"&gt;
            &lt;td bgcolor="Red"&gt;
            &lt;xsl:value-of select="Date"/&gt;
            &lt;/td&gt;
          &lt;/xsl:when&gt;
          &lt;xsl:otherwise&gt;
            &lt;td bgcolor="White"&gt;&lt;xsl:value-of select="Date"/&gt;&lt;/td&gt;
          &lt;/xsl:otherwise&gt;
        &lt;/xsl:choose&gt;
        &lt;xsl:choose&gt;
          &lt;xsl:when test="Outcome = 'Fail'"&gt;
            &lt;td bgcolor="Red"&gt;
            &lt;xsl:value-of select="StartTime"/&gt;
            &lt;/td&gt;
          &lt;/xsl:when&gt;
          &lt;xsl:otherwise&gt;
            &lt;td bgcolor="White"&gt;&lt;xsl:value-of select="StartTime"/&gt;&lt;/td&gt;
          &lt;/xsl:otherwise&gt;
        &lt;/xsl:choose&gt;
        &lt;xsl:choose&gt;
          &lt;xsl:when test="Outcome = 'Fail'"&gt;
            &lt;td bgcolor="Red"&gt;
            &lt;xsl:value-of select="EndTime"/&gt;
            &lt;/td&gt;
          &lt;/xsl:when&gt;
          &lt;xsl:otherwise&gt;
            &lt;td bgcolor="White"&gt;&lt;xsl:value-of select="EndTime"/&gt;&lt;/td&gt;
          &lt;/xsl:otherwise&gt;
        &lt;/xsl:choose&gt;
        &lt;xsl:choose&gt;
          &lt;xsl:when test="Outcome = 'Fail'"&gt;
            &lt;td bgcolor="Red"&gt;
            &lt;xsl:value-of select="Duration"/&gt;
            &lt;/td&gt;
          &lt;/xsl:when&gt;
          &lt;xsl:otherwise&gt;
            &lt;td bgcolor="White"&gt;&lt;xsl:value-of select="Duration"/&gt;&lt;/td&gt;
          &lt;/xsl:otherwise&gt;
        &lt;/xsl:choose&gt;
        &lt;xsl:choose&gt;
          &lt;xsl:when test="Outcome = 'Fail'"&gt;
            &lt;td bgcolor="Red"&gt;
            &lt;xsl:value-of select="Outcome"/&gt;
            &lt;/td&gt;
          &lt;/xsl:when&gt;
          &lt;xsl:otherwise&gt;
            &lt;td bgcolor="White"&gt;&lt;xsl:value-of select="Outcome"/&gt;&lt;/td&gt;
          &lt;/xsl:otherwise&gt;
        &lt;/xsl:choose&gt;
        &lt;xsl:choose&gt;
          &lt;xsl:when test="Outcome = 'Fail'"&gt;
            &lt;td bgcolor="Red"&gt;
            &lt;xsl:value-of select="FailureReason"/&gt;
            &lt;/td&gt;
          &lt;/xsl:when&gt;
          &lt;xsl:otherwise&gt;
            &lt;td bgcolor="White"&gt;&lt;span&gt;N/A&lt;/span&gt;&lt;/td&gt;
          &lt;/xsl:otherwise&gt;
        &lt;/xsl:choose&gt;
      &lt;/tr&gt;
      &lt;/xsl:for-each&gt;
    &lt;/table&gt;
    &lt;/p&gt;
    &lt;/div&gt;
  &lt;/xsl:for-each&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm sure there are far better ways of doing the above, but what I want to do is have a link, preferably on each of the Name lines that will show or hide the table that is displayed directly beneath it.</p>
  
  <p>I have tried something along the lines of <a href="https://stackoverflow.com/questions/6832357/document-style-display-not-sticking-for-some-reason">document.style.display not sticking for some reason</a></p>
  
  <p>and </p>
  
  <p><a href="http://p2p.wrox.com/xslt/55403-hiding-showing-table-html-through-xslt.html" rel="nofollow noreferrer">http://p2p.wrox.com/xslt/55403-hiding-showing-table-html-through-xslt.html</a></p>
  
  <p>but as a noob to the world of coding, XML, and XSL I'm a little lost. Any help would be gratefully appreciated and forward my understanding of this topic.</p>
  
  <p>Thanks</p>