SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Apr 30, 2007, 05:41 #1
- 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.
Code:<a href="nojavascript.html" onclick="showHide(this, 'Learn', 'Hide');return false;">Learn</a> additional information about fish.
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>
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>
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>
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>
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>
-
Apr 30, 2007, 08:43 #2
- 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>
-
Apr 30, 2007, 09:34 #3
- 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>
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>
-
Apr 30, 2007, 11:41 #4
- 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"; } }
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>
-
Apr 30, 2007, 11:46 #5
- 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>
-
Apr 30, 2007, 14:32 #6
- 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
Bookmarks