How to nest JavaScript code? (URGENT)

I have a JavaScript code so when I click “see the comments” it shows some text that was previously hidden, and changes to “hide the comments” in order to hide them again.

You can see an example at http://heyfyou.com/hideshow.php

I want to put this code in my page a few times, but the problem is when I click the second “see the comments” on the page, it shows the first set.

I was thinking that if I could nest the javascript code so the variables were only defined within the nest, then this wouldn’t happen. Any idea how to do that?

Or any idea of a better way?

THANK YOU! I APPRECIATE THE HELP!

It looks like the problem isn’t with the JavaScript, but with the HTML. You have both links open the same id. If you give the second comments div a different id, then it should work.

For example, instead of this:


<div id="wrap">
    <p><a href="/showhide-content-css-javascript/"> <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Second code.</a></p>
    <div id="example" class="more">
        <p> This is the hidden text for the SECOND code.</p>
        <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide the Comments.</a></p> 
    </div>
</div>

…use this:


<div id="wrap">
    <p><a href="/showhide-content-css-javascript/"> <a href="#" id="example2-show" class="showLink" onclick="showHide('example2');return false;">Second code.</a></p>
    <div id="example2" class="more">
        <p> This is the hidden text for the SECOND code.</p>
        <p><a href="#" id="example2-hide" class="hideLink" onclick="showHide('example2');return false;">Hide the Comments.</a></p> 
    </div>
</div>

Thank you so much! Works perfectly!