Hello Site Point! ^,^

I'm trying to implement a show/hide toggle for each users profile field in the view body topic of my forum.

I found this thread here @ sitepoint which is close to what I'm working on, but the code I'm working with is different.

What I need are some changes to the JS so that each show/hide works independently, not just the first instance of the show/hide.

how do you call this HTML
Code:
<center><p>...show/hide testing...<br>
<a href="#" id="example-show" class="showLink" 
onclick="showHide('example');return false;"> [SHOW] </a>
</p></center>
<div id="example" class="more">
<center><p>...hidden content...</p>
	<p><a href="#" id="example-hide" class="hideLink" 
	onclick="showHide('example');return false;"> [HIDE] </a></p></center>
</div>
with this JS to be independent?
Code:
function showHide(shID) {
	if (document.getElementById(shID)) {
		if (document.getElementById(shID+'-show').style.display != 'none') {
			document.getElementById(shID+'-show').style.display = 'none';
			document.getElementById(shID).style.display = 'block';
		}
		else {
			document.getElementById(shID+'-show').style.display = 'inline';
			document.getElementById(shID).style.display = 'none';
		}
	}
}
I know that this would have bits of " $(function() and $(this) " but that's about all I know...


Please help my brain is sore from giving it my best effort.

forum is PUNBB/forumotion same as my name .com