title: Toggle visibility of a table element HTML through a button
body: <p>I am writing a XSL file which transforms a piece of XML into HTML and it contains a snippet of javascript code that I use to toggle the visibility of an table element HTML by a click on a button. I don't need to use style at the moment.</p>
  
  <p>Here is my XML:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
  &lt;?xml-stylesheet type='text/xsl' href='myXSL.xsl'?&gt;
  &lt;LISTS&gt;
    &lt;SCR&gt;repository&lt;/SCR&gt;
    &lt;Dependency&gt;&lt;ArtifactId&gt;maven&lt;/ArtifactId&gt;
    &lt;GroupId&gt;NO&lt;/GroupId&gt;
    &lt;!--two tags details appear only if the 'GroupId' node value  is 'NO'--&gt;
    &lt;detail1&gt;
      Here is a text detail 1
    &lt;/detail1&gt;
    &lt;detail2&gt;
      Here is a text detail 2
    &lt;/detail2&gt;
    &lt;/Dependency&gt;
    &lt;Dependency&gt;
      &lt;ArtifactId&gt;eclipse&lt;/ArtifactId&gt;
    &lt;GroupId&gt;YES&lt;/GroupId&gt;&lt;/Dependency&gt;
  &lt;/LISTS&gt;
  </code></pre>
  
  <p>My XSL is:</p>
  
  <pre><code>&lt;xsl:template match = "/"&gt;
   &lt;html&gt;
     &lt;head&gt;
      &lt;script type="text/javascript"&gt;
  
      function toggle(p1,p2)
      {
        if(document.all){document.getElementById(p1).style.display =
     document.getElementById(p1).style.display == "block" ? "none" : "block";}
        else{document.getElementById(p1).style.display =  
     document.getElementById(p1).style.display == "table" ? "none" : "table";}
        document.getElementById(p2).value =  
     document.getElementById(p2).value == "[-] Detruire" ? "[+] Construire" : "[-] Detruire";
       }
  
      &lt;/script&gt;
  
     &lt;/head&gt;
  
       &lt;BODY&gt;
          &lt;table&gt;
              &lt;xsl:for-each select="LISTS/Dependency"&gt;
                  &lt;xsl:call-template name="myTemplate"/&gt;      
              &lt;/xsl:for-each&gt;  
          &lt;/table&gt;
       &lt;/BODY&gt;
   &lt;/html&gt;
   &lt;/xsl:template&gt;
  
  &lt;!-- called template--&gt;
  
  &lt;xsl:template name="myTemplate"&gt;
  &lt;tr&gt;        
       &lt;xsl:choose&gt;
          &lt;xsl:when test="GroupId='YES'"&gt;
           &lt;tr&gt;
               &lt;td&gt;&lt;xsl:value-of select="ArtifactId"/&gt;&lt;/td&gt;
               &lt;td&gt;OK&lt;/td&gt;
          &lt;/tr&gt;
           &lt;/xsl:when&gt;
  
          &lt;xsl:when test="GroupId='NO'"&gt;
          &lt;tr&gt;
               &lt;td&gt;&lt;xsl:value-of select="ArtifactId"/&gt;&lt;/td&gt;
  
              &lt;td align="right"&gt;KO&lt;input id="mylnk" type="button"  
     value="[+] Construire" onclick="toggle('tb','mylnk');"/&gt;&lt;/td&gt;
           &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; 
                  &lt;table width="100%" border="1" cellpadding="4" 
      cellspacing="0" id="tb" name="tb"&gt;
                    &lt;tr&gt;                   
                      &lt;td&gt;&lt;xsl:value-of select="detail1"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;xsl:value-of select="detail2"/&gt;&lt;/td&gt;
                   &lt;/tr&gt;     
                   &lt;/table&gt;
              &lt;/td&gt; 
          &lt;/tr&gt;              
          &lt;/xsl:when&gt;
  
      &lt;/xsl:choose&gt;
  &lt;/tr&gt;
  &lt;/xsl:template&gt;
  
  &lt;/xsl:stylesheet&gt;
  </code></pre>
  
  <p>The result I get with my XSL is below:</p>
  
  <p><img src="https://i.stack.imgur.com/xGokH.png" alt="enter image description here"></p>
  
  <p>How can I change my XSL to get by default this one?</p>
  
  <pre><code>![enter image description here][2]
  </code></pre>
  
  <p>And when expanding, getting this one?</p>
  
  <pre><code>![enter image description here][3]
  </code></pre>