josestaysfreshq
New Member
I have a xml file containing some data. I would like to display an "extended" view of the data or an overview. I manage to display the extended view with XSL and I am not fighting with javascript to hide some content for the overview.Here is my xml file:\[code\]<BS><project> <name>project1</name> <references id="1"> <ref>ref1</ref> <ref>ref2</ref> <ref>ref3</ref> </references> <references id="2"> <ref>ref4</ref> <ref>ref5</ref> <ref>ref6</ref> </references></project><project> <name>project2</name> <references id="1"> <ref>ref7</ref> <ref>ref8</ref> <ref>ref9</ref> </references></project></BS>\[/code\]and my XSL:\[code\]<?xml version="1.0" encoding="ISO-8859-1"?><html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript" type="text/javascript">function HideClass(matchClass) { var elems = document.getElementsByTagName('*'),i; for (i in elems) { if((elems.className).indexOf(matchClass) > -1) { elems.style.display = 'none'; } } }function ShowClass(matchClass) { var elems = document.getElementsByTagName('*'),i; for (i in elems) { if((elems.className).indexOf(matchClass) > -1) { elems.style.display = 'block'; } } }function ShowOverview() { var elems = document.getElementsByTagName('*'),i; for (i in elems) { if((elems.className).indexOf('id1') > -1) { elems.style.display = 'block'; } else { elems.style.display = 'none'; } } }</script> </head> <body><xsl:for-each select="BS/project"> <h3><xsl:attribute name="class"><xsl:value-of select="name"/>-id1</xsl:attribute> <xsl:value-of select="name"/> </h3> <xsl:for-each select="references"> <div><xsl:attribute name="class"><xsl:value-of select="name"/>-id<xsl:value-of select="@id"/></xsl:attribute> Status: OK<br/> References id: <xsl:value-of select="@id"/> <table> <xsl:for-each select="ref"> <tr><td> <xsl:value-of select="text()"/> </td></tr> </xsl:for-each> </table> </div> <br/> </xsl:for-each> <!-- link Hide--> <xsl:element name="a"> <xsl:attribute name="href">#</xsl:attribute> <xsl:attribute name="onclick">HideClass('<xsl:value-of select="name"/>');return false;</xsl:attribute> <i><xsl:text>Hide </xsl:text><xsl:value-of select="name"/></i> </xsl:element> <!-- end of link --> <br/> <!-- link Show--> <xsl:element name="a"> <xsl:attribute name="href">#</xsl:attribute> <xsl:attribute name="onclick">ShowClass('<xsl:value-of select="name"/>');return false;</xsl:attribute> <i><xsl:text>Show </xsl:text><xsl:value-of select="name"/></i> </xsl:element> <!-- end of link --> <br/></xsl:for-each><hr/><a href="http://stackoverflow.com/questions/10874464/#" onclick="ShowOverview();return false;"> Show only overview</a></body></html>\[/code\]But it does not work. I would like to display everything on "load page" (this is working!) and to hide the project 1 (and all its content) while clicking on "Hide project1".Moreover, I would like to display an "overview of all projects" with:
- the title (ex < h3 > Project 1 < /h3 > )
- the first references (with status, ref id=1 and the table containing the ref)