This article shows how to write content sections that can be hidden and opened with just a click; this works well on pages with lots of content that can be broken into subheadings and the reader can control how much content is shown at one time.
A good example is a product reviews site that has tabulated rows for ratings and prices. You can use this script to list lots of products down the page and allow the reader to open descriptions by just a click. The reader can decide when its necessary to view the content.
This is a combination of CSS and JavaScript and can be inserted anywhere in the page, here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Content Toggle CSS</title>
<script language="javascript">
function divshowhide() {
var l_divshowhide = document.getElementById("divshowhide"); /* Get the Div Id */
var l_title = document.getElementById("title"); /* Get the title tag Id */
if(l_divshowhide.style.display == "block") { /* Check Div display property whether it is block or none */
l_divshowhide.style.display = "none"; /* Set none if its value is block */
l_title.innerHTML = "What Content Do I Reveal?"; /* Set the Title Content (We can change the content dynamically */
}
else {
l_divshowhide.style.display = "block"; /* Set block if its value is none */
l_title.innerHTML = "What Content Do I Reveal?"; /* Change the title content when the user click on the title */ }
}
</script>
<style>
h1 /* Set the Style for the h1 Tag(title) */
{
font:Verdana, Arial, Helvetica, sans-serif;
font-size:large;
color:#000099;
}
#divshowhide /* Set the Style for the div Tag(content) */
{
font:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#990066;
}
</style>
</head>
<body>
<a id="title" href="javascript:divshowhide();">What Content Do I Reveal?
</a> <!– Set the title content here –>
<!– Set the Div Content Here –>
<div id="divshowhide" style="display: none">
<h1>You can hide content like this to be opened when required by the viewer</h1>
<p>You can set up content blocks in this way for various types of web pages e.g. a comparisons reviews page could have several products with star ratings. Readers can then click the links to open the product descriptions. Such a site can have lots of products listed down the page.</p>
</div>
</body>
</html>
There are actually many uses for this type of code including being able to reduce the page lengths of your web sites.
How would I do this for multiple links one the same page?
Joseph, i believe the code does that already, assuming i understand you correctly. You can list as many links as required. Perhaps you could elaborate.
isnt that the same way the SPRY is used in Dreamwaever?
Win a printer! Castle Ink is giving away a printer every month. Learn More