Drop Down/Sliding Info using JavaScript 1

mac7attack · Oct 10, 2005

Hi,

I am trying to create a web page using an xml file and xstl. I would like to display a list of questions then when the user clicks on a question the answer appears below the question and clicks on the question again to hide the answer

Code:

<Questions>
<question>
<ask>Why?</ask>
<answer>Cause I can</answer>
</question>
<question>
<ask>Where?</ask>
<answer>On a web page</answer>
</question>
</Questions>

Before Click

Code:

Why?
Where?

After Click on Why?

Code:

Why?
   Cause I can
Where?

I know the xml above is not valid xml, it is just a snippet.

Thanks in advanced,
MAC

dwarfthrower · Oct 10, 2005

And the XSL you are using is? And the problem you are having with it is?

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

JontyMC · Oct 11, 2005

I would use a definition list and create id's based on node position:

Code:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="[URL unfurl="true"]http://www.w3.org/1999/XSL/Transform">[/URL]
  <xsl:output method="xml" indent="yes" encoding="iso-8859-1" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[/URL] omit-xml-declaration="yes"/>
  <xsl:template match="/">
    <html>
      <head>
        <title>Questions</title>
        <script type="text/javascript">
function showHide(answer)
{
  answer = document.getElementById(answer);
  if(answer.style.display == "none")
  {
    answer.style.display = "block";
  }
  else
  {
    answer.style.display = "none";
  }
}        
        </script>
      </head>
      <body>
        <xsl:apply-templates select="Questions"/>
      </body>
    </html>
  </xsl:template>
  <xsl:template match="Questions">
    <dl>
      <xsl:apply-templates select="question"/>
    </dl>
  </xsl:template>
  <xsl:template match="question">
    <dt>
      <a href="javascript: showHide('answer{position()}')">
        <xsl:value-of select="ask"/>
      </a>
    </dt>
    <dd id="answer{position()}" style="display: none;">
      <xsl:value-of select="answer"/>
    </dd>
  </xsl:template>
</xsl:stylesheet>

Jon

"I don't regret this, but I both rue and lament it.

mac7attack · Oct 11, 2005

Thanks Jon.

I think that solves my problem.
I will test it out some more later today.

MAC

mac7attack · Oct 11, 2005

The solution above looks good for hiding/showing one tag of xml but how do tell the javascript that there are two or more tags to hide/show.

Code:

<Questions>
 <question>
  <ask>How would I install software?</ask>
  <answer>
   <text>Explainging installing</text>
   <pic>pic1.jpg</pic>
   <text>More explaning</text>
   <pic>pic2.jpg</pic>
  </answer>
 </question>
<question>
 <ask>Another question</ask>
 <answer>
  <text>Some Answer here</text>
  </answer
</question>
</Questions>

Before

Code:

How would I install software?
Another Question

After click

Code:

How would I install software?
  Explainging installing
   (Show pic1.jpg)
  More explaining
  (show pic2.jpg)
Another Question

JontyMC · Oct 11, 2005

Apply a template to the answer tag:

Code:

<dd id="answer{position()}" style="display: none;">
  <xsl:apply-templates select="answer"/>
</dd>

Then you can do whatever you want with the answer section:

Code:

<xsl:template match="answer">
  <xsl:apply-templates/>
</xsl:template>
<xsl:template match="text">
  <xsl:value-of select="."/>
  <br/>
</xsl:template>
<xsl:template match="pic">
  <img src="{.}" alt="Picture - {.}"/>
  <br/>
</xsl:template>

Jon

"I don't regret this, but I both rue and lament it.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Drop Down/Sliding Info using JavaScript 1

mac7attack

Technical User

dwarfthrower

Programmer

JontyMC

Programmer

mac7attack

Technical User

mac7attack

Technical User

JontyMC

Programmer

Similar threads

Part and Inventory Search

Sponsor