variations on "show" and "hide" script

[paulcj2]

I am using a combination of CSS and JavaScript suggested by JimFraiser at:
http://www.sitepoint.com/forums/showthread.php?t=466522
The purpose is to "show" and "hide" multiple sets of instructions on a page.

As it stands, the script requires the same words "show" and "hide" on all information sets to activate it. I want to modify the script so I can substitute other pairs of words like "Learn" and "Hide" or "See" and "Hide." I have tried to pass these words via the link:

<a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about fish.

by modifying it to:

<a href="nojavascript.html" onclick="showHide(this, 'Learn', 'Hide');return false;">Learn</a> additional information about fish.

but my modification is not working.
In the second example of my modified script below, after one clicks on "Learn," instead of displaying "Hide" and "Learn," the script displays "textHide" and "textShow." Below are links to the script as it worked originally and as I am trying to modify it.

Sample as it worked originally:
http://www.clickbasics.com/show_hide...mple_orig.html

Sample as I am trying to modify it:
http://www.clickbasics.com/show_hide_multi_example.html

For the original:
the CSS is:

<style type="text/css">
.additionalInfo {
    border: 1px dashed black;
    padding: 5px;
    margin: 5px;
}
</style>

the script is:

<script type="text/javascript">
function showHide(link) {
    var theDiv = link.parentNode.getElementsByTagName("div")[0]; // this gives us a reference to the div that contains the text we want to hide/show
    if (link.innerHTML == "Show") {
        // we need to show the div
        theDiv.style.display = "";
        link.innerHTML = "Hide";
    } else {
        // we need to hide the div
        theDiv.style.display = "none";
        link.innerHTML = "Show";
    }
}
</script>

the mark-up is:

<div class="additionalInfo">
    <a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about fish.
    <div style="display:none;">
        mmm..fish
    </div>
</div>
<div class="additionalInfo">
    <a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about sheep.
    <div style="display:none;">
        At least half of a sheep in Scotland is black.
    </div>
</div>
<div class="additionalInfo">
    <a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about chickens.
    <div style="display:none;">
        Some chickens lay eggs.
    </div>
</div>

My modified script is:

<script type="text/javascript">
function showHide(link) {
    var theDiv = link.parentNode.getElementsByTagName("div")[0]; // this gives us a reference to the div that contains the text we want to hide/show
    if (link.innerHTML == "textShow") {
        // we need to show the div
        theDiv.style.display = "";
        link.innerHTML = "textHide";
    } else {
        // we need to hide the div
        theDiv.style.display = "none";
        link.innerHTML = "textShow";
    }
}
</script>

and my modified mark-up is:

<div class="additionalInfo">
    <a href="nojavascript.html" onclick="showHide(this, 'Show', 'Hide');return false;">Show</a> additional information about fish.
    <div style="display:none;">
        mmm..fish
    </div>
</div>
<div class="additionalInfo">
    <a href="nojavascript.html" onclick="showHide(this, 'Learn', 'Hide');return false;">Learn</a> about sheep.
    <div style="display:none;">
        At least half of a sheep in Scotland is black.
    </div>
</div>
<div class="additionalInfo">
    <a href="nojavascript.html" onclick="showHide(this, 'See', 'Hide');return false;">See</a> additional information about chickens.
    <div style="display:none;">
        Some chickens lay eggs.
    </div>
</div>

What do In ned to do differently to get this to work right?