I am trying to create a HTML documen from XML using XSLT to create a situation where each time a certain element occurs, a button is displayed which can be used to show hidden content.
So for example in the XML below, the content of the example element can be displayed if a button is clicked.
<article xmlns="http://docbook.org/ns/docbook" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://docbook.org/ns/docbook
schema/docbook.xsd">
<title>something</title>
<section sensing="1" intuitive="2">
<title>First</title>
<example show="off" label="1">
<title>first example</title>
<para>example text</para>
</example>
<para>para First 1</para>
<para>para First 2</para>
</section>
<section sensing="2" intuitive="1">
<title>Second</title>
<example show="off" label="2">
<title>second example</title>
<para>example text</para>
</example>
<para>para Second 1</para>
<para>para Second 2</para>
</section>
</article>
I have a situation where Javascript in an HTML document is used to switch stylesheets associated with that document.
This is so that the XML can be sorted according to different criteria. It includes a refresh() function which re-loads the styelsheets.
It also includes functions which change the attributes of certain XML elements. Using the refresh() function, this can be used to show or hide these elements depending on the value of their attributes.
The way I do it at the moment ALL the elements of a certain name have their attributes changed.
function changeAtt(ell)
{
var el; /*variable to refer to element name*/
var list; /* variable which will hold list of elements*/
el = ell;
/*get all elements in dataXML according to the value of el*/
list = dataXML.documentElement.getElementsByTagName(el);
/*loop through the elements and set all attributes
* named "show" to the new value of "att"*/
for(var i = 0; i < list.length; i++)
{
list[i].setAttribute("show", "on");
}
refresh();
}
If I include a button in a XSLT template - something like this
<xsl:template match="ns:example">
<button id ="btn2" onclick="changeAtt('example', '0') ; return false" >show examples</button>
<xsl:if test="@show = 'on'">
</xsl:if>
</xsl:template>
And change the function to something like this
function changeAtt(ell, number)
{
var el; /*variable to refer to element name*/
var list; /* variable which will hold list of elements*/
el = ell;
no = number;
/*get all elements in dataXML according to the value of el*/
list = dataXML.documentElement.getElementsByTagName(el);
/*loop through the elements and set all attributes
* named "show" to the new value of "att"*/
list[no].setAttribute("show", "on");
refresh();
}
Then I can specify that a single element has its attribute changed. But of course, this way,each time there is a "example" element, the button that occurs there changes the attribute of the same element - in this case the first example element.
How can I set it up so that the button only changes the attribute of the "current" element?
show element button
