you can attach the id of the node to the questions and the answers

Thanks for the reply!

I was thinking that, but how would I go about getting the number as part of the ID of the divs?

I'm asking this since I know very little about xslt.

Lets say I add a number property to the document type and call it position.

You can get position of an xslt for-each with the position() method.  This will give you a number value starting fron 1

<xsl:for-each select="...">
<xsl:value-of select="position()"/>
</xsl:for-each>
 
 

What he said.. :)

I take that as a High five Daniel ;)

/Kim Andersen

Thank you!

That'll work.

High five! :)

Great to hear Elad!

Obviously you can use the same technique for rendering the a-tags in your FAQ.

/Kim A

Well I got the first part working. Thanks!

Now about the jquery code. I added a class to all the answer divs so I can bind a .click event to all of them.

Now how do I go about handleing the .click event?

I was thinking of writing another function and passing it a position() as a parameter.

Any better ideas?

@Kim:  High Five given!

Add a class to the divs and bind to the click event of the class... here's a one I rolled: http://city.findwoodlandpark.com/faq/

$('.faqitem').click(function(){ ... code to show answer ...});

amendum to previous... here's my faq.js script

$(document).ready(function(){
  //just some regular style sheets. change them as you see fit
  var styling =".question{font-size:14px; font-weight:bold; cursor:pointer;}" +
               ".answer{display:block;}" +
               ".opened{color:#006699;}" +
               ".closed{color:#009966;}" +
               ".answerlabel{cursor:pointer;float:right;clear:both;}" +
               ".answerimage{cursor:pointer;vertical-align:middle;}" +
               ".faqitem{cursor:pointer;}";

  //attach style to the page
  var style = document.createElement("style");
  style.type = "text/css";
  try {
      style.appendChild( document.createTextNode(styling) );
  } catch (e) {
      if ( style.styleSheet ) {
          style.styleSheet.cssText = styling;
      }
  }
  document.body.appendChild( style );

  //style all questions as closed
  $(".question").addClass("closed");
  $(".answer").hide();
  $(".answerlabel .answerimage").attr("src", "/css/images/plus.gif");

  //faqitem click
  $(".faqitem").click(function() {
    $(this).children(".answer").slideUp("fast");
    $(this).children(".question").removeClass("opened").addClass("closed");
    $(this).children(".answerlabel .answerimage").attr("src", "/css/images/plus.gif");

    if ($(this).children(".answer").is(":hidden")) {
      $(this).children(".answerlabel .answerimage").attr("src", "/css/images/minus.gif");
      $(this).children(".answer").slideDown("fast");
      $(this).children(".question").removeClass("closed").addClass("opened");
    }          
  });
});

Wow... Thanks Daniel!

I got my own done already, but this is great. Thank you for the effort.

No effort at all.. your welcome!

is working on a reply...