Show/hide details on web pages
Posted on Tuesday, July 17, 2007 at 9:57 PM
It's always nice to include lots of text containing keywords on a web page. But it is so easy to overdo the amount of text. Indeed, it can be very offputting to a visitor.
Is there a way to include text such that the veiwer can elect to read it or not ? YES THERE IS ! And I found it at the HTMLcenter web site.
It's all rather easy actually. First of all yopu need a small amount of JavaScript programming, which should be put in the <head> section of your web page. Here is the code.
<script> function show_hide(the_layer)
{
if(document.getElementById(the_layer))
{
if(document.getElementById(the_layer).style.display
== 'none')
{
document.getElementById(the_layer).style.display =
'inline';
}
else
{
document.getElementById(the_layer).style.display
= 'none';
}
}
}
</script>
Right, having sorted that out you need to code your HTML in a special way as follows. By the way, this example code is taken from my Agatha Christie web site where you can see it in operation on the home page and also on each novel summary page. Do have a look and then return to this posting.
<p><a href="javascript:show_hide('foobar');">Show/hide Agatha Christie's biography<'/a><br /><br /></p><div style="display: none; text-align: justify;" id="foobar"><p>Agatha Mary Clarissa Christie (Lady Mallowan) DBE is known throughout the world as the Queen of crime.......</div>
You will see that the coding is in several parts. A call to the JavaScript routine, the link text I wanted to display on the page, a <div> with various formatting commandes to hold my text, and the text itself.
As you will see from my example page(s) the effect is great.
HAVE FUN !
Technorati Tags: gbtamc, show/hide, layers
