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?

[siteguru]

<script type="text/javascript">
function showHide(link, sText) {
    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 == sText) {
        // 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 = sText;
    }
}
</script>

[paulcj2]

siteguru,

I made the changes you suggested.
http://www.clickbasics.com/show_hide...mple_new3.html

As you will see, when you click on the "Show," "Learn," or "See" links, they turn to "sText" without displaying the content. When you click on the links a second time, they display the content and then turn to "Hide." Click again, and they turn to "sText." Looks like I don't quite have it right.

JavaScript is now:

<script type="text/javascript">
function showHide(link, sText) {
    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 == sText) {
        // 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 = sText;
    }
}
</script>

and the markup 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>

Your thoughts?

[siteguru]

Why are you passing 3 parameters to the showHide() function when it is only expecting 2?

Also, you did not use the code I posted ... you had ...

function showHide(link, sText) {
	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 == "sText") {
		// 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 = "sText";
	}
}

i.e. you are using "sText" when I defined sText. Here is the source of a page I have TESTED AND WORKS!

<html>
<head>
<title>Show/Hide multi example_new</title>
<style type="text/css">
.additionalInfo {
	border: 1px dashed black;
	padding: 5px;
	margin: 5px;
}
</style>
<script type="text/javascript">
function showHide(link, sText) {
	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 == sText) {
		// we need to show the div
		theDiv.style.display = "block";
		link.innerHTML = "Hide";
	} else {
		// we need to hide the div
		theDiv.style.display = "none";
		link.innerHTML = sText;
	}
}
</script>
</head>
<body>
<div class="additionalInfo">
	<a href="nojavascript.html" onclick="showHide(this, 'Show');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');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');return false;">See</a> additional information about chickens.
	<div style="display:none;">

		Some chickens lay eggs.
	</div>
</div>

</body>
</html>

[siteguru]

If you want to pass both the SHOW and HIDE texts then ...

<html>
<head>
<title>Show/Hide multi example_new</title>
<style type="text/css">
.additionalInfo {
	border: 1px dashed black;
	padding: 5px;
	margin: 5px;
}
</style>
<script type="text/javascript">
function showHide(link, sShow, sHide) {
	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 == sShow) {
		// we need to show the div
		theDiv.style.display = "block";
		link.innerHTML = sHide;
	} else {
		// we need to hide the div
		theDiv.style.display = "none";
		link.innerHTML = sShow;
	}
}
</script>
</head>
<body>
<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', 'Forget');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>

</body>
</html>

[paulcj2]

siteguru,

You are absolutely spot on. Sorry for my confusion. It's working great at:
http://www.clickbasics.com/show_hide...ple_new_4.html