Andrew Green
10-10-2005, 03:59 AM
This will create headings for hidden sections that open when clicked on.
Multiple levels can be done by putting the heading and text within the div of the parent.
<html>
<head>
<style type="text/css">
h3.treeheading{ /* sets the cursor to a pointer when moved over the headings */
cursor:pointer;
}
div.hidden{
display:none; /*Start the contents off hidden */
}
</style>
<script type="text/javascript">
function hideit(name) // This function takes the id of the section to turn on and off, called when the title is clicked
{
if(document.getElementById(name).style.display == "block"){
document.getElementById(name).style.display = "none";
// If it's currently being displayed hide it
}
else {
document.getElementById(name).style.display = "block";
// if not show it
}
}
</script>
</head>
<body>
<!-- Set up a heading using the defined class -->
<h3 class="treeheading" onclick="hideit('section1')">Section 1</h3>
<!-- Everything within the div tags is hidden, if you don't set the class to hidden it will start visible but still work -->
<!-- the id on the div is what gets passed to hideit() above -->
<div class="hidden" id="section1">
<p >this hides!</p>
</div>
<!--new id and do it again -->
<h3 class="treeheading" onclick="hideit('section2')">Section 2</h3>
<div class="hidden" id="section2">
<p>this hides too!</p>
</div>
<!-- To create a tree of links the same thing works, but you might find it easier to use
ul / li instead of h3 / p. Really you can structure that in any way you like. -->
</body>
</html>
Multiple levels can be done by putting the heading and text within the div of the parent.
<html>
<head>
<style type="text/css">
h3.treeheading{ /* sets the cursor to a pointer when moved over the headings */
cursor:pointer;
}
div.hidden{
display:none; /*Start the contents off hidden */
}
</style>
<script type="text/javascript">
function hideit(name) // This function takes the id of the section to turn on and off, called when the title is clicked
{
if(document.getElementById(name).style.display == "block"){
document.getElementById(name).style.display = "none";
// If it's currently being displayed hide it
}
else {
document.getElementById(name).style.display = "block";
// if not show it
}
}
</script>
</head>
<body>
<!-- Set up a heading using the defined class -->
<h3 class="treeheading" onclick="hideit('section1')">Section 1</h3>
<!-- Everything within the div tags is hidden, if you don't set the class to hidden it will start visible but still work -->
<!-- the id on the div is what gets passed to hideit() above -->
<div class="hidden" id="section1">
<p >this hides!</p>
</div>
<!--new id and do it again -->
<h3 class="treeheading" onclick="hideit('section2')">Section 2</h3>
<div class="hidden" id="section2">
<p>this hides too!</p>
</div>
<!-- To create a tree of links the same thing works, but you might find it easier to use
ul / li instead of h3 / p. Really you can structure that in any way you like. -->
</body>
</html>