Toggle statement: Click it is:Click it is not?

Discussion in 'JavaScript' started by WhidbeyTomas, Jul 17, 2007.

0
  1. #1
    I don't know much (ok, anything) about javaScript. I am using MS Word 2003 (not Pro) to generated xml with xsl and .js files for display in html.

    I have a line of code in my xsl that calls javaScript. This code allows the user to click on a specially taged word (called a term) and cause a definition to be pulled from an xml file for display. It also includes code that allows the user to click on the definition to make it disappear. The trouble is, users (including me) don't even think of clicking on the definition. They try to toggle the term and then figure the definition is there for good. I want to implement the expected functionality, toggling the term, but I am having trouble figuring out how to do that.

    I suspect there is a way to write code that causes the content to hide or show based on the present condition (condition=!condition).

    The xsl code is:
    [CODE<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>
    [/CODE]

    This code calls the "show" or a "hide" functions which resides in a .js file.

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

    These functions apply the following styles:
    .show {
    font-size: 12px;
    font-weight: normal;
    margin-left: 2px;
    color: #009944;
    font-style: italic;
    }
    .hide } style to the content (display:none;).

    This seems like a pretty simple need, but I am not having much luck so far. Any help would be appreciated.
     
    WhidbeyTomas, Jul 17, 2007 IP
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Mike H., Jul 17, 2007 IP
  3. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #3
    Your show() or hide() functions are being called ?
    If yes, instead of changing the class, try changing the style only (you'll need to add the other properties to their respective classes).
    function show(ID) {document.getElementById(ID).style.display="";}
    function hide(ID) {document.getElementById(ID).style.display="none";}
     
    ajsa52, Jul 17, 2007 IP