Make hidden text appear and change control text |
Make hidden text appear and change control text |
Woody20 |
Feb 1 2012, 04:50 PM
Post
#1
|
Novice Group: Members Posts: 27 Joined: 11-March 11 Member No.: 14,105 |
In HTML 4.01, I have a chunk of text that is normally hidden, and "control" text that makes the hidden text appear when clicked. Here is the HTML:
<p><span onClick="hiddenTextBlock.style.display=''"> Show me </span> <p id="hiddenTextBlock" style="display:none"> Text which is normally hidden </p> All this works correctly (if I've copied the code correctly!), but now I want additionally to change the "Show me" text to "Hide me". I can do this by changing the first line to <p><span onClick="this.innerHTML='Hide me'"> Of course, now the hidden text doesn't appear. What I need is a way of having both parts of the handler execute. I have tried to set up a JavaScript function, but I don't know how to pass it a reference to the control text. 'this' doesn't seem to work. |
Darin McGrew |
Feb 1 2012, 06:12 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
This is about JavaScript, so I'm moving it to the client-side programming forum.
|
Frederiek |
Feb 2 2012, 02:28 AM
Post
#3
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You need to wrap it all in a function.
Stu Nicholls has an exemple of this here: http://www.stunicholls.com/various/more.html . |
Brian Chandler |
Feb 2 2012, 07:59 AM
Post
#4
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
You need to wrap it all in a function. Stu Nicholls has an exemple of this here: http://www.stunicholls.com/various/more.html . I don't see any particular reason you need to make the code a function, and I can't see any way at all in which the Stu Nicholls page helps. In principle onclick can be any appropriate code. |
Frederiek |
Feb 2 2012, 10:33 AM
Post
#5
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Of course you do. How else would you change "Show me" into "Hide me" and have the corresponding behaviours. Stu Nichools' sample just shows that. Or, if you prefer: http://www.javascriptkit.com/javatutors/dom3.shtml.
|
Christian J |
Feb 2 2012, 10:49 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
onClick="hiddenTextBlock.style.display=''"> The above is not correct (and doesn't work in Firefox), use this instead: CODE onClick="document.getElementById('hiddenTextBlock').style.display=''"> QUOTE now I want additionally to change the "Show me" text to "Hide me". You can use an IF/ELSE condition: CODE <p><span id="toggleControl" onClick="toggle();"></span></p> <p id="hiddenTextBlock">Text which is normally hidden</p> <script type="text/javascript"> var toggleControl=document.getElementById('toggleControl'); var hiddenTextBlock=document.getElementById('hiddenTextBlock'); function toggle() { if(hiddenTextBlock.style.display=='block') { hiddenTextBlock.style.display='none'; toggleControl.innerHTML='Show me'; } else if(hiddenTextBlock.style.display=='none') { hiddenTextBlock.style.display='block'; toggleControl.innerHTML='Hide me'; } } // initialize when page is first loaded: hiddenTextBlock.style.display='none'; toggleControl.innerHTML='Show me'; toggleControl.style.cursor='pointer'; </script> To make the script more robust I use JS (not plain CSS) to initially hide the text block, otherwise users without JS will not be able to see it. I also hide the toggle control text from users without JS, otherwise they'd see a non-functional control. |
Brian Chandler |
Feb 2 2012, 11:21 AM
Post
#7
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Of course you do. How else would you change "Show me" into "Hide me" and have the corresponding behaviours. Stu Nichools' sample just shows that. Or, if you prefer: http://www.javascriptkit.com/javatutors/dom3.shtml. Sorry, are you asserting that only code within a function body can do certain types of operation? Can you give some sort of reference to such a claim in the Javascript manual? Supposing you have a function which does what you need, and suppose that B is the body of the function, with the formal parameters replaced by the values you are going to call them with, you simply write 'B' as the value of the onclick handler. Of course it is usually neater to write this code in a function, but it is not essential. (I clicked on the first Stu Nicholls link, and saw nothing relevant. Sorry if I didn't persevere enough.) |
Frederiek |
Feb 2 2012, 11:44 AM
Post
#8
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
QUOTE Sorry, are you asserting that only code within a function body can do certain types of operation? No, but putting all behaviours in an onclick seems tedious to me. A function seems in place here, as Christian kindly posted. If you change that with some function parameters, you can even reuse it elsewhere on the same page too (like with Stu Nicholls' script). |
Woody20 |
Mar 13 2012, 01:17 AM
Post
#9
|
Novice Group: Members Posts: 27 Joined: 11-March 11 Member No.: 14,105 |
Here's how I ended up doing it:
CODE <p style="text-decoration: underline; color:green"> <SPAN onClick="this.innerHTML=this.innerHTML=='Show examples'?'Hide examples':'Show examples'; Ex1.style.display=='block'?Ex1.style.display= 'none':Ex1.style.display='block'">Show examples</SPAN> <p id="Ex1" style="display:none"> Examples, normally hidden. </p> When the page is first loaded, it shows Show examples. When it is clicked, the Examples appear, and the text changes to Hide examples. A second click returns to the original appearance. This post has been edited by Woody20: Mar 13 2012, 01:18 AM |
Christian J |
Mar 13 2012, 07:40 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
You should use something like
CODE document.getElementById('Ex1').style.display=document.getElementById('Ex1').style.display=='block'?'none':'block' otherwise it will not work in Firefox. And with CODE <p id="Ex1" style="display:none"> users without javascript will not be able to view the hidden text. |
XP1 |
Mar 17 2012, 10:45 AM
Post
#11
|
Group: Members Posts: 7 Joined: 14-March 12 Member No.: 16,709 |
Use
CODE this keyword. |
Lo-Fi Version | Time is now: 18th April 2024 - 09:54 PM |