SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <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:

    HTML Code:
    <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>

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much! Works perfectly!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •