[xsl] Generating a <div>-toggling ID as a variable

["Charles Muller acmuller@xxxxxxxxxxxxxxx" <xsl-list-service@xxxxxxxxxxxxxxxxxxxxxx>]

Dear XSLT'ers,

I am trying to help a student in my XML class solve a problem for which 
I'm not sure there is a solution.

She is encoding and transforming a Sino-Japanese character dictionary 
done with the TEI dictionaries recommendations. Like all standard 
dictionaries of this type, the format is that of a single kanji headword 
with pronunciation and definition(s), followed by compound words with 
pronunciation and definitions. A simplified presentation of the data 
looks like this:

<entry xml:id="m117">
<dictScrap>
    <form>
    <orth>g5</orth>
    <pron xml:lang="ja-hb">sai</pron>
</form>
    <sense><def>A wasting disease</def></sense>
</dictScrap>

    <hom><re>
    <form><orth>g5f</orth>
        <pron xml:lang="ja-hb">saiyu</pron></form>
         <sense><def>convalescent</def></sense></re>
     <re><form><orth>gg5</orth>
    <pron xml:lang="ja-hb">rE
sai</pron>
</form>  <sense><def>consumption</def><def>wasting</def></sense>
</re>
</hom>

<entry xml:id="m118">
<dictScrap><form>
    <orth>e5</orth> ...

The <hom> tag was used arbitrarily to wrap a set of <re> tags 
(transforming into a <div> in HTML), because the student would like to 
toggle the view of the compound words in a single set, which are now 
wrapped by <hom>.

Writing the javascript and HTML code to toggle one section based on a 
<div> ID is no problem, but in order for each <hom> section of each of 
the many <entry(s)> in the dictionary to be toggled individually, each 
one would need its own separate ID to be generated. I've spent a couple 
of hours researching this, and from what I've found, I'm not sure if 
it's possible.

The Javascript in the header looks like this:

              function myFunction(id) {
              var x = document.getElementById('myDIV');
              if (x.style.display == 'none') {
              x.style.display = 'block';
              } else
              {
              x.style.display = 'none';
              }
              }

And the XSLT at the toggle point down below looks like this:

    <xsl:template match="dictScrap">
        <p><xsl:apply-templates/></p>
        <button onclick="myFunction(id);return false;">Show related 
words</button>

    </xsl:template>

    <xsl:template match="hom">
        <div id="myDIV" style="display: none"><xsl:apply-templates/></div>
    </xsl:template>

So the crux of the matter seems to be whether the 'myDIV' that is used 
in the Javascript function, which appears as the <div id> below, can be 
turned into a variable that will function separately for each entry. 
Does anyone know if this is possible?


Chuck



---------------------------
A. Charles Muller

Graduate School of Humanities and Sociology
Faculty of Letters
University of Tokyo
7-3-1 HongE
, BunkyE
-ku
Tokyo 113-8654, Japan

Office Phone: 03-5841-3735

Web Site: Resources for East Asian Language and Thought
http://www.acmuller.net

Twitter: @H_Buddhism