Need help with an XSLT problem

Any web developers out there that can give me some direction here? I have this project where I'm taking a large amount of xml data and using xslt I'm creating sytlesheets. I'm ok with taking the data and transforming it, what I'm lost on is some specific formatting that I need to have done and how to incorporate it in my XSL.

What I need to be able to do is make sections (these sections are most likely just tables) collapsable. The output is huge, so instead of having to scroll down to see the various sections, I want titles/headers for the various sections and their content collapsed. To view them you'd have to expand the section, etc.

I could really use some direction, or some code examples, etc. Should I use standard CSS, XHTML, or XSLFO? I have very little info about XSLFO so I'm not sure if it can even do collapsable sections like that, using xslFO.

Any info, pointers, or suggestions are greatly appreciated.

Is this a client-side or server-side XSLT transformation? If it's server-side, then you're just dealing with plain ol' html here and can use CSS and JS to switch between display:none and display:block for each section's (or row's) style. Let me know if you want syntax examples. If it's client-side XSLT, that's a bit more tricky and would take some investigation to get you an answer.

It's server side. Some syntax examples would be awesome. At this point I don't even know if I should be trying to utilize CSS, javascript or HTML to do what I need. I tried searching out on the Net, without much luck.

Well, when you do the tranform server-side, all you end up sending to the client is HTML. So, you can then manipulate that HTML as you normally would with client-side scripting and CSS.

So, say you want to make a table be hidden or shown based upon the user clicking a link. Above that table would be a link to expand/collapse:

<a href="expandcollapse(&#039;data1&#039;);">Expand/collapse</a> ...

Then, you could have a javascript function that would modify the style of that table:

function expandcollapse(tableid) { var mytable=document.getElementById(tableid); if(!='none')"none"; else"block"; }

This should work out for you (I tested it). It should be noted that the initial 'style.display' value of that item on page load is nothing, and not block. So you can't necessarily test based upon what the style IS, but what it is not.

the source for the whole test page is:

function expandcollapse(tableid) { var mytable=document.getElementById(tableid); if(!='none')"none"; else"block"; } <a href="expandcollapse(&#039;data1&#039;);">Expand/collapse</a> ...

Hope this works out for you...

Hmm, upon reading your initial post again, you want to start with the section being collapsed. That changes it a bit. First, add style inside the head section :

table {display:none;}

and modify the JS function like this:

function expandcollapse(tableid) { var mytable=document.getElementById(tableid); if(!='block')"block"; else"none"; }

This should do what you want.

Thanks Bagga, that's a big help. I owe ya a beer. Now, hopefully I can incorporate it into my stylesheets.

No problem, lemme know if you need any more explanation or examples. You should be able to put similar stuff right into your XSLT sheet. I believe you'll need to put your javascript into CDATA tags for compliance.

Cool, I got it to work with my XSL sheet, but now I'm running into problems when it has mutliple tables. It'd be nice if I could pass parameters between XML and JS, but I'm not sure if that's even possible. Is there any way to pass an xml element's name or attribute to expandcollapse(), for example? Some way to make the data1 argument in your example, expandcollapse('data1'), to reflect the xml element it's working with. Am I making sense?

Sure... replace 'data1' in the link and the table id with something like That way, when the XSL transforms it, it'll grab each unique id (whatever you may have in your xml data) to use as the id's. The ID name 'data1' is completely arbitrary and can be anything you want to insert for each different table. How are you outputting your data? If you're looping through xml with an xsl:for-each you can insert that value-of I referenced above. Make sense?

Ah, ok. I know how to use xpath in XML, but couldn't get it to work in the expandcollapse function and figured it wasn't possible. I guess I'll have to jack with it some more.

Yep, I'm looping through and grabbing the xml data with xsl:for-each statements.

Thanks again, I really appreciate the help.

If you get stuck, post a sample of the xml and the xsl you're using and I can take a crack at it.