Click on a hyperlink to open text

[Steve Novak]

In the following site
http://support.apple.com/kb/ht1574
There is a hyperlink with the text " How to redeem an iTunes Gift Card
on a computer"
When you click on it, it reveals some more text which disappears on
the next click.
I inspected the code to figure out how this is done but was unable to
isolate the required code.
Can someone pleas post a simple example of the code to achieve this
effect.

 

[Jukka K. Korpela]

In the following site
http://support.apple.com/kb/ht1574
There is a hyperlink with the text " How to redeem an iTunes Gift Card
on a computer"

It looks like a link, but it's not a real link, in the full meaning of
the word. Disable JavaScript in your browser and try again to see that
the "link" does not work.

When you click on it, it reveals some more text which disappears on
the next click.
I inspected the code to figure out how this is done but was unable to
isolate the required code.

It's rather simple though slightly obfuscated by various complexities.
The text revealed is part of the document's content, just placed in an
element that is hidden with CSS (display: none is one simple way of
hiding, and it's what the page uses). When you click on the "link", then
(if JavaScript is enabled), the CSS settings for the element are changed
and it becomes visible. Clicking it again changes the status back.

A fundamental design flaw with this is that when CSS is enabled and
JavaScript is not, the information is not available at all to the user.

A more robust way would be something like this:

<div class=stuff>
<h2>How to do something</h2>
<div class=howto>
This is how to do it, in detail.
</div>
</div>

Works fine, doesn't it? If you want to hide the detailed explanation
initially and make it available only via clicking on the heading
(assuming the user realizes he needs to do that! you might wish to style
the heading in a link-like manner for that), you should ensure that
hiding only takes place when revealing is possible.

This means that you would add some relatively simple JavaScript code
that traverses the document, recognizes elements that have class=stuff,
assigns an onclick handler to the h2 element inside any such element and
sets the display property of any element with class=howto to 'none'. The
onclick event handler would then just toggle that display property value
between 'none' and 'block'.

It's not that complicated, and I would say that if you don't know how to
do that (and don't want to learn that), you shouldn't do it - just
copying such code without understanding how it works tends to hurt,
sooner or later.

 

[dorayme]

....

A fundamental design flaw with this is that when CSS is enabled and
JavaScript is not, the information is not available at all to the user.

It is to me on my Mac on FF or Safari with JS disabled, the info
simply appears in full. The JS only enables a hiding, its absence
does not make it compulsory.

 

[Jukka K. Korpela]

It is to me on my Mac on FF or Safari with JS disabled, the info
simply appears in full. The JS only enables a hiding, its absence
does not make it compulsory.

Standing corrected, I realize that I had right-clicked and selected
"Inspect Element" (a Firebug feature), which showed me

<blockquote style="display: block;">

and I failed to remember that it shows me the document's current status,
not the original HTML source. That is, display: block had been added
with JavaScript.

So it works just as you say. I wouldn't copy the code though - it's far
too complex for simple use, and the basic idea can be implemented much
simpler (with a few-liner if you use jQuery).

 

[Jonathan N. Little]

(with a few-liner if you use jQuery).

Yeah, but you have to load this lumbering mess of a library for a rather
simple roll-your-own handful for JavaScript functions...

 

[Steve Novak]

A fundamental design flaw with this is that when CSS is enabled and
JavaScript is not, the information is not available at all to the user.

A more robust way would be something like this:

<div class=stuff>
<h2>How to do something</h2>
<div class=howto>
This is how to do it, in detail.
</div>
</div>

Works fine, doesn't it?

I copied your sample code and it does not work.
I don't mind if in order to achieve this effect there is a need for
CSS or JavaScript. All I'm after is a simple example of working code.

 

[dorayme]

<[email protected]
m>,

I copied your sample code and it does not work.

It works to give the information without any tricks, that I think
is the point. Tricks to be truly admired are the ones by
accomplished magicians.

Still, I digress. Here is one rudimentary way that can be
enhanced all sorts of ways:

body {
margin: 1em 2em 1em 2em;
max-width: 40em;
}
h1 {font-size: 1.3em; }
p.example {
width: 40em;
}
..one:hover:after {
content: "Cras vel eros. Vivamus sed odio et orci tincidunt
ornare. Duis dui lectus, commodo ut, gravida id, ultricies quis,
tellus. Vestibulum blandit nibh eget turpis. Quisque mollis,
lacus consectetur eleifend convallis, diam augue blandit magna.
Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis
dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
consectetur eleifend convallis, diam augue blandit magna. Cras
vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
consectetur eleifend convallis, diam augue blandit magna.";
color: #00c;
background: #fff;
}
div span {color: #c00; background: white;}

with

<p class="example one">On hover, extra text should appear.<br></p>

 

[Steve Novak]

ok, I found some simple code that does it:
http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

 

[Jukka K. Korpela]

ok, I found some simple code that does it:
http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

Anyone who uses it probably deserves what he gets, so how about first
doing even the elementary test (which the page author should have
conducted) of switching off images in your browser and then seeing how
the page "works".

To repeat myself: This is the kind of things you shouldn't do if you
don't know how to code it yourself - properly. (If you do know it, you
can of course look at other people's code to get some ideas about
details and enhancements.)