ansaurus

Question

Answer 1

A:

The best solution is a combination of XSLT and CSS. With XSLT you built an XHTML with links in some section and full description in other section. Then use CSS to hide and show description on user link activation (take care of crossbrowser issues about :active, :focus, and :target pseudoclass). Don't try to asyncronous something that is syncronous

Alejandro 2010-08-26 22:14:58

Answer 2

A:

Use css and some javascript to show and hide the details of each CD. Use the xslt to write out all the CD details and then use css to hide the details (display:none;) Define an id for each CD using the XSLT position() function to generate a unique id for each CD and then using jquery, toggle the visibility of the CD details.

  <xsl:template match="/">
    <html>
      <head>
        <style>
          .hidden { display:none; }
          .details { background-color: whitesmoke; border: 1px solid #ccc; font-size: small; padding-left: 10px; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script>
          function toggleDiv(id) {
          $("#" + id).toggle("slow");
          return false;
          }
        </script>
      </head>
      <body>
        <h2>My CD Collection</h2>
        <ul>
          <xsl:for-each select="catalog/cd">
            <li>
              <a href="#" onclick="toggleDiv('div{position()}');">
                <xsl:value-of select="title"/>
              </a>
            </li>
            <div class="hidden details" id="div{position()}">
              <p>Artist: <xsl:value-of select="artist"/></p>
              <p>Country: <xsl:value-of select="country"/></p>
              <p>Company: <xsl:value-of select="company"/></p>
              <p>Price: $<xsl:value-of select="price"/></p>
              <p>Year: <xsl:value-of select="year"/></p>
            </div>
          </xsl:for-each>
        </ul>
      </body>
    </html>
  </xsl:template>

Catch22 2010-09-01 11:33:37

ansaurus

tags:

views:

answers:

Detailed View with XSLT

related questions