Rick - Take a look into CSS. It'll make things 100 times easier when making web pages.
Here's what you need. I've split the code into three parts. First, let us see a HTML page using the code.
Save the below code into a HTML file - name doesn't matter Code:
<html>
<head>
<title>FAQ Test Page</title>
<script language="JavaScript" src="expand.js"></script>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body onload="collapseAll()">
<ul class="SectionList">
<li onclick="expand('listA')">Section Header</li>
<ul class="QuestionList" id="listA">
<li>Question?</li>
<li>Question?</li>
<li>Question?</li>
<li>Question?</li>
</ul>
<li onclick="expand('listB')">Section Header</li>
<ul class="QuestionList" id="listB">
<li>Question?</li>
<li>Question?</li>
<li>Question?</li>
<li>Question?</li>
</ul>
<li onclick="expand('listC')">Section Header</li>
<ul class="QuestionList" id="listC">
<li>Question?</li>
<li>Question?</li>
<li>Question?</li>
<li>Question?</li>
</ul>
</ul>
</body>
</html>
Doesn't look too bad does it. The FAQ is divided into two parts - Sections and Questions. Sections will be something like "General Questions" or "Billing Questions". Questions will be things like "Who long will it take to deliver?" or "Can dogs look up?".
Here's a section with a load of questions in it:
Code:
<li onclick="expand('listC')">Section Header</li>
<ul class="QuestionList" id="listC">
<li>Question?</li>
<li>Question?</li>
<li>Question?</li>
<li>Question?</li>
</ul>
Few things to point out:
- The names in the expand() call and the ID of the QuestionList UL element must match.
- The name for the QuestionList and function call must be unique. No two can be the same on the page. It's better to use a name instead of listA, listB etc. as it's easier to read.
- The <body onload... line ensures all elements are hidden when the page is first shown
I don't think there's much more to explain here. Let's move onto the JavaScript.
The following needs to be saved in a file called "expand.js" and should be in the same directory as your HTML page Code:
// Class of the elements you wish to hide
var questionClass = "QuestionList";
// Collapse all elements
function collapseAll() {
// Get all lists on the page
var allSections = document.getElementsByTagName("UL");
// For each list...
for (i=0; i<allSections.length; i++) {
// ... Make sure it is a QuestionList ...
if (allSections[i].className == questionClass) {
// ... If it is, set the display to none (hidden)
allSections[i].style.display = "none";
}
}
}
// Expand a certain element
function expand(name) {
// Collapse any shown elements
collapseAll();
// Is the element hidden? If so show it. If not, hide it.
var newStyle = "";
if (document.getElementById(name).style.display != "block") {
// Show the element
newStyle = "block";
} else {
// Hide the element
newStyle = "none";
}
// Set the new style
document.getElementById(name).style.display = newStyle;
}
I'll let the comments in the code explain what's going on. Onto the stylesheet.
Put this code in a file called "stlye.css" and save it in the same directory as your HTML page Code:
* {
font-family: Verdana, Tahoma, Arial;
}
.SectionList {
font-size: 12px;
}
.QuestionList {
font-size: 11px;
}
#listA {
color: red;
}
#listB {
color: blue;
}
#listC {
color: green;
}
None of this is actually needed - I just put it here to demonstrate things.
The * {...} section sets values for all elements on a page. In this case, the font.
.SectionList{...} & .QuestionList{...} can be used to format the seperate parts in different ways. I have made the section headers larger than the questions in this example.
#listA, #listB etc. can be used to format each set of questions differently.
I think that's it. It's pretty simple code and it could do with some improving. Let me know what you think Rick and what changes you would like to see and I'll help you. P.s. if you want to change the bullet points in the list, let me know. There's a tidy little trick to that
) will walk through it and see if I can pick it up. At a glance I think I will be able to.
Linear Mode
