The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Make hidden text appear and change control text
Woody20
post 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Feb 2 2012, 07:59 AM
Post #4


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(Frederiek @ Feb 2 2012, 04:28 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 2 2012, 10:49 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Woody20 @ Feb 1 2012, 10:50 PM) *
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Feb 2 2012, 11:21 AM
Post #7


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(Frederiek @ Feb 3 2012, 12:33 AM) *

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.)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Woody20
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 13 2012, 07:40 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
XP1
post Mar 17 2012, 10:45 AM
Post #11





Group: Members
Posts: 7
Joined: 14-March 12
Member No.: 16,709



Use
CODE
this
keyword.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:10 PM