/    Sign up×
Community /Pin to ProfileBookmark

How do you make text appear onClick?

Copy linkTweet thisAlerts:
May 29.2005

Hi there,

I am making a website in a computing course and I want to make text appear onClick. When the user clicks on a certain picture, I want text to actually appear below the image as text or a hyperlink. Could anyone help me with the right javascript code?

Cheers,
Mriceguy.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesMay 29.2005 — <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
<!--
.hidden {display:none}
-->
</style>

</head>
<body onload="document.getElementById ('bettie-bio').className = 'hidden'">
<div>

<img alt="Bettie Page" onclick="document.getElementById ('bettie-bio').className = document.getElementById ('bettie-bio').className == 'hidden' ? '' : 'hidden'" src="http://www.bettiepage.com/images/photos/bikini/bikini1_a.jpg">

</div>
<p id="bettie-bio">Born on April 22, 1923, in Nashville, Tennessee, Bettie was the second of Walter Roy Page and Edna Mae Pirtle’s six children. During Bettie’s early years, the Page family traveled around the country in search of economic stability. At a tender age, Bettie had to face the responsibilities of caring for her younger siblings as well as helping her mother with the house chores...</p>
</body>
</html>
Copy linkTweet thisAlerts:
@BigOMay 29.2005 — I'm not absolutely certain, but can't you make a function with document.write then have IMG SRC in the body somewhere to do that?

that would be something like:

<html>

<head>

<Script type="text/javascript">

function [I]Myfunction[/I] ()

{

document.write ("[I]some text[/I]")

}

</script>

</head>

<body>

<form>

<IMG SRC="[I]Browser location for image[/I]" NAME="[I]name[/I]" onclick="[I]Myfunction[/I] ()">

</form>

</body>

</html>

This right here won't work, but the answer is something to this air.
Copy linkTweet thisAlerts:
@MriceguyauthorMay 29.2005 — Hey, thanks for the javascript. It works perfectly!

Cheers,

Mriceguy
Copy linkTweet thisAlerts:
@MriceguyauthorMay 29.2005 — Charles, using your code, how would you bring up more than one paragraph of text onClick. I've been experimenting but it seems not to work correctly. I am not an experienced javascripter!

Cheers,

Mriceguy
Copy linkTweet thisAlerts:
@CharlesMay 29.2005 — Just wrap everything in a DIV and toggle that.
Copy linkTweet thisAlerts:
@Travis123May 16.2009 — I have the same issue. I have multiple paragraphs and want to have all of them appear and disappear instead of just the first paragraph. I'm a beginning web developer so please explain in simple terms. This is what I'm looking for to be precise: I have a line of text (FAQ) and want the answer to appear below after you click on the question. Then having the option to click the question once more and the text disappears.

This is exactly what I want: http://kleankanteen.com/faqs/faqs.html

The color change would be preferred but I don't want to go through too much trouble.

Thanks!
×

Success!

Help @Mriceguy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...