Toggle statement

[WhidbeyTomas]

Good morning (evening, afternoon)! I am completely ignorant of xsl. I use xml with Flash, but I am working on a project that uses xml and xsl to populate html.

My interface has glossary terms that when clicked on cause a definition to show. The problem is that to remove the definition, the user has to click on the definition, and no one thinks of that. I would like to turn the term into a toggle switch.

I have done this with actionScript, but I don't even know what this language is, let alone how it works.

Can anyone tell me if this is possible? The code below seems to call the show function. So I tried writing a shoHide function, whick did not work. But if I can simply turn the following line into a toggle, I don't need a function:

onMouseOver="cursorhandon('{$nameid}')" onclick="show('{$termid}')" ID="{$nameid}"><xsl:value-of select="$defterm" /></span>

Here are the functions that are called:

function show(ID) {document.getElementById(ID).className="show";}
function hide(ID) {document.getElementById(ID).className="hide";}

This code applies the style "show" and tells the browser to get and display the content (I think). The line that follows tells the browser to apply the "hide" style to the content (display:none;).



So...it would seem that a toggle that says "click_its visible=click_its not visible," would do the trick.

If someone can tell me how this kind of statement is written, if it is possible, I'd be grateful.

Here is the full xsl template (what ever that is):
<xsl:template match="w:p">
<xsl:variable name="infostyle" select="w:pPr/w:pStyle/@w:val" />
<div class="{$infostyle}">
<xsl:for-each select="w:r">
<xsl:choose>
<xsl:when test="w:rPr/w:rStyle/@w:val='keyterm'">
<xsl:variable name="termid" select="generate-id()" />
<xsl:variable name="nameid" select="concat('t',generate-id())" />
<xsl:variable name="defterm" select="w:t/text()" />
<span class="terminline" onMouseOver="cursorhandon('{$nameid}')" onclick="show('{$termid}')" ID="{$nameid}"><xsl:value-of select="$defterm" /></span>
<span ID="{$termid}" onMouseOver="cursorhandon('{$termid}')" class="hide" onclick="hide('{$termid}')"><xsl:value-of select="document('../content/terms.xml')/w:wordDocument/w:body/wx:sect[w:p[1]/w:r/w:t=$defterm]/w:p[2]" /></span>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="w:t/text()" />
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</div>
<xsl:apply-templates />
</xsl:template>

[jkmyoung]

Change it to showHide:
onMouseOver="cursorhandon('{$nameid}')" onclick="showHide('{$termid}')" ID="{$nameid}"><xsl:value-of select="$defterm" /></span>Write the function for showHide, scrap these 2:
function show(ID) {document.getElementById(ID).className="show";}
function hide(ID) {document.getElementById(ID).className="hide";}
Replace with:function showHide(ID) {
ele = document.getElementById(ID);
if (ele.className=="show"){
ele.className = "hide";
}else{
ele.className = "show";
}
}

[WhidbeyTomas]

Thanks jkmyoung. That is a nice function. If I understand your solution, the only change on the xsl document is the name of the function call (show becomes showHide).

On the .js file, I commented out the show function and left the hide, since its only function is to respond to a click on the definition, and I inserted your nifty function.

That should have worked, but it didn't. I wonder if it is a path issue? I realize this is probably a stupid suggestion, but these kinds of problems are almost always an issue of path, for me.

OK. Then being the superstitious type, I removed hide and show from the .js folder. Still didn't work. Its voodoo.

[jkmyoung]

2nd change to xsl function, name of function call hide on the definition onclick method also becomes showHide.

if (ele.className=="show"){
On second look, I'm not sure if == works on strings, perhaps .equals?
if (ele.className.equals("show")){

Otherwise, you could also try removing the intermediate object, ele.
function showHide(ID) {
if (document.getElementById(ID).className.equals("show"))
document.getElementById(ID).className.className = "hide";
}else{
document.getElementById(ID).className.className = "show";
}
}

[WhidbeyTomas]

I really appreciate your effort on this. Even though we have not found the answer, I am benefiting from the exercise. As with most of this, I don't do it often enough to get sharp.

I installed your latest version and the result was that we lost the mouse-over hand pointer (as well as all click functionality). That surprised me. I can't understand why that would happen.

Here is the current xls code:
<span class="terminline" onMouseOver="cursorhandon('{$nameid}')" onclick="showHide('{$termid}')" ID="{$nameid}"><xsl:value-of select="$defterm" /></span>
<span ID="{$termid}" onMouseOver="cursorhandon('{$termid}')" class="hide" onclick="showHide('{$termid}')"><xsl:value-of select="document('../content/terms.xml')/w:wordDocument/w:body/wx:sect[w:p[1]/w:r/w:t=$defterm]/w:p[2]" /></span>

Maybe the loss of the hand will suggest something.

[WhidbeyTomas]

The result seems to be the same with equals or ==.

[jkmyoung]

Sorry, missing brace {; probably caused all javascript to stop functioning
function showHide(ID) {
if (document.getElementById(ID).className == "show") {
document.getElementById(ID).className = "hide";
} else {
document.getElementById(ID).className = "show";
}
}
I'm not sure why this wouldn't work. Putting it in a small html page, it seems to work eg:

<html>
<head>
<title>Title</title>
<script type="text/javascript">
function showHide(ID) {
if (document.getElementById(ID).className == "show") {
document.getElementById(ID).className = "hide";
} else {
document.getElementById(ID).className = "show";
}
}
</script>
<style type="text/css">
.hide {display: none}
.show {display: block}
</style>
</head>
<body>
<p>Enter the body text of your HTML document here</p>
<span class="terminline" onclick="showHide('LO1')" ID="LO2">CONTROLLER</span>
<span ID="LO1" class="hide" onclick="showHide('LO1')">TOGGLED</span>
</body>
</html>

[WhidbeyTomas]

Mr. JKMyoung. I will try this as soon as I get a chance. I have tried other solutions that work in isolation, but not within our mix of xsl/js/css. I have asked someone from our technical support team to sit with me and see if there is a piece I am missing. (I feel confident that I am not telling you everything.) There is also a good chance I am leaving something out when implementing your solution (although I doubt it).

What every happens, I'll keep you posted.

[WhidbeyTomas]

The bracket restored the hand, but the definition still does not show on click. It is a puzzle. Is the problem a broken connection to the CSS or something to do with the many other process that I do not understand?

[WhidbeyTomas]

Once again, thanks to jkmyoung! This has been a good learning experience for me. Your function was just fine. With help from my son, we searched and found quite a few calls for the original function (show), so the logical solution was to change the show function, instead of creating the new showHide function. Making that change, with your function, was completely successful! (So in the end, no change was made to the xsl or the css.)

Here is the final version of the function:
function show(ID)
{

var el = document.getElementById(ID);
if (el.className == "show")
{
el.className = "hide";
}
else
{
el.className = "show";
}
}

(For the benefit of others, who know as little as I)

This is how my onMouseClick works: I learned that the xls (which calls the content from the xml document and formats the page) uses a onMouseClick event to call a JavaScript function called show. Show uses "className" to refer to the css style. The JavaScript function is called when the user clicks on the target. The function named "show" does no more than change the css style that the HTML will apply to the text. The JavaScript function simply says, check the element ID for className; if className is show, make it hide; if it is hide, make it show. As the html rewrites the page, the latest specified css style is applied.