SitePoint Sponsor

User Tag List

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

    variations on "show" and "hide" script

    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:
    Code:
    <a href="nojavascript.html" onclick="showHide(this);return false;">Show</a> additional information about fish.
    by modifying it to:
    Code:
    <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:
    Code:
    <style type="text/css">
    .additionalInfo {
        border: 1px dashed black;
        padding: 5px;
        margin: 5px;
    }
    </style>
    the script is:
    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 == "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:
    HTML Code:
    <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:
    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 == "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:
    HTML Code:
    <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?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <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>
    Ian Anderson
    www.siteguru.co.uk

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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:
    HTML Code:
    <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?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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 ...

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

    Code:
    <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>
    Ian Anderson
    www.siteguru.co.uk

  5. #5
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you want to pass both the SHOW and HIDE texts then ...

    Code:
    <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>
    Ian Anderson
    www.siteguru.co.uk

  6. #6
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    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
  •