SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    passing variables to a "show and hide" script

    I am using the following "show and hide" script:
    Code:
         <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 == "Read") {
            // 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 = "Read";
        }
    }
    </script>
    with the following HTML:
    Code:
    <div class="additionalInfo_no_brdr">
        <a href="nojavascript.html" onclick="showHide(this);return false;">Read</a> More on Recycling
        <div style="display:none;">
    <p>In the spirit of the three Rs (reduce, reuse, recycle), ...</p>
        </div>
    </div>
    and CSS
    Code:
    .additionalInfo_no_brdr{
        padding: 5px;
        margin: 5px;
    }
    I want to modify the script, so that it will accept text for links other than "Read" and "Hide." I have modified it as follows:
    Code:
         <script type="text/javascript">
    function showHide(link, textShow, textHide) {
        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>
    Now, how do I declare the content of textShow and textHide in various instances of the HTML?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    hi Paul,

    probably just changing:
    Code:
    var theDiv = link.parentNode.getElementsByTagName("div")[0];
    to
    Code:
    var theDiv = document.getElementById(link);
    ... I think!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Wizard silver trophy rushiku's Avatar
    Join Date
    Dec 2003
    Location
    A van down by the river
    Posts
    2,056
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    How about this:
    Code:
    <a href="nojavascript.html" onclick="showHide(this,'Gimme More', 'Take It Away');return false;">Gimme More</a>

  4. #4
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to you both. This works great.
    Code:
    <a href="nojavascript.html" onclick="showHide(this,'Gimme More', 'Take It Away');return false;">Gimme More</a>
    Paul C.
    ClickBasics
    http://www.clickbasics.com


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
  •