I'm tasked with finding a client-side solution to dynamically displaying data from XML (so no PHP or ASP please). I am totally open to any suggestions on how to do this but I am currently trying a solution using JQuery and DIVs (which may not be the most elegant). Here's what I have so far:XML\[code\]<ForAdoption><Pet> <ID_Key>123abc</ID_Key> <Name>Spot</Name> <Species>dog</Species> <Info>Stuff about Spot.</Info></Pet><Pet> <ID_Key>789ghi</ID_Key> <Name>Doggy</Name> <Species>dog</Species> <Info>Stuff about Doggy.</Info></Pet><Pet> <ID_Key>987zyx</ID_Key> <Name>Mittens</Name> <Species>cat</Species> <Info>Stuff about Mittens.</Info></Pet>\[/code\]*I have no way of knowing how many pets there will be or what the unique ID_Key will be.What I want to happen is for the returned values in the XSL to contain a "link" to display more information based on a specific animal (I'm using JQuery to do this). So basically, the Info results would be contained within a DIV that is styled with display:none. I would like for each pet's "link" to reference that pet's ID_Key (which will always be unique). I was then hoping that I could show the additional information about that pet based on it's ID_Key. Does that make sense?Here's my XSL so far:\[code\]<xsl:for-each select="ForAdoption/Pet"> <p> ID_Key: <span style="cursor
ointer;text-decoration:underline;" id="{ID_Key}"><xsl:value-of select="ID_Key" /></span><br /> Name: <xsl:value-of select="Name"/><br /> Species: <xsl:value-of select="Species"/> </p> <script> $(document).ready(function () { $("#<xsl:value-of select="ID_Key" />").toggle(function() { $("#more_info").show(); $("#").hide(); }, function() { $("#more_info").hide(); }); }); </script> <div style="display:none;" id="more_info"> More info: <xsl:value-of select="Info" /> <!-- Need to figure out how to add some intelligence to connect this result to the selected ID_Key --> </div></xsl:for-each>\[/code\]So this works in that clicking on the ID_Key will display more info but it only displays the Info value for the first pet in my XML. Of course, what I would like is for some intelligence that says: If ID_Key (as returned in the id from my span "link") = n then display Info for the pet where ID_Key=n! I see and understand why this is happening but I just don't know how to go about getting my desired results.Is this possible? Is there a better JavaScript/JQuery solution? Is this kind of thing even possible to do client-side? Any suggestions are appreciated.
ointer;text-decoration:underline;" id="{ID_Key}"><xsl:value-of select="ID_Key" /></span><br /> Name: <xsl:value-of select="Name"/><br /> Species: <xsl:value-of select="Species"/> </p> <script> $(document).ready(function () { $("#<xsl:value-of select="ID_Key" />").toggle(function() { $("#more_info").show(); $("#").hide(); }, function() { $("#more_info").hide(); }); }); </script> <div style="display:none;" id="more_info"> More info: <xsl:value-of select="Info" /> <!-- Need to figure out how to add some intelligence to connect this result to the selected ID_Key --> </div></xsl:for-each>\[/code\]So this works in that clicking on the ID_Key will display more info but it only displays the Info value for the first pet in my XML. Of course, what I would like is for some intelligence that says: If ID_Key (as returned in the id from my span "link") = n then display Info for the pet where ID_Key=n! I see and understand why this is happening but I just don't know how to go about getting my desired results.Is this possible? Is there a better JavaScript/JQuery solution? Is this kind of thing even possible to do client-side? Any suggestions are appreciated.