I'll do my best to explain Rick. If we take it down to the smallest stage and then build them up one by one it'll help. I'll highlight the changes in
bold each time.
Step 1 - Blank Page
Code:
<html>
<head>
<title>FAQ Test Page</title>
</head>
<body>
</body>
</html>
We start with a nice blank page. Not much to explain here.
Step 2 - The <head>section
In this section we need to place a link to both our stylesheet (the .css file) and our JavaScript code (the .js file).
To import a stylesheet you use the following line:
Code:
<link rel="stylesheet" href="<CSS_FILE_LOCATION>" media="screen"/>
There are a number of other things you can put in a link tag for a stylesheet but that'll do for now.
To import a JavaScript file we need the following line:
Code:
<script language="JavaScript" src="<JS_FILE_LOCATION>"></script>
This will import all the code in the specified JS file for use on the page. You could just put all the JS code between the <script> tags but this isn't a good idea. If you use some code on more than one page that would mean you would have to rewrite the same code on all the pages - not good!
So let's say we have our stylesheet and Javascripts mentioned earlier in the post (expand.js and style.css) and they are both saved in the same directory as our HTML pages. We now add the above lines to the code and our blank HTML page now looks like this:
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>
</body>
</html>
Step 3 - Adding Sections
Now we have the needed code import ready for use by the web page we can start writing the actual questions. First we do is add the different sections we would like. Some examples of what the sections could be:
Shopping FAQ Page: General, Delivery, Refunds, Contact Info
School FAQ Page: Science, Math, R.E, English, History
Cookery FAQ Page: Ingredients, Techinques, Shopping
I'll use the shopping sections in this example. We'll build the page up slowly.
At the moment we have this:
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>
</body>
</html>
First we add a <ul> tag:
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>
<ul class="SectionList">
</ul>
</body>
</html>
<ul> tag's are
unordered lists. Something similar to
You can also have ordereded lists where each bullet point is numbered. These are ordered lists and use the <ol> tag.
Don't worry too much about the class="SectionList" part of the <ul> tag. This is telling the browser to look in the stylesheet (css file) for a class called "SectionList" and use the styles defined in the stylesheet to format this tag.
To tell the browser what each bullet point should contain, we have to put the text into <li> (
list item) tags. Anything between <li> and </li> will be put into a bullet point.
So for our example, we want each subject to have a bullet point. This means having a <li> tag for each header. So if we go back to our HTML page, we now need to change it to look like this:
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>
<ul class="SectionList">
<li>General</li>
<li>Delivery</li>
<li>Refunds</li>
<li>Contact Info</li>
</ul>
</body>
</html>
if you want more sections, add more <li> tags. So if you looked at your HTML page it would contain a list like this:
- General
- Delivery
- Refunds
- Contact Info
Step 4 - Adding The Questions
So now we have our different sections, we need to add our questions. As we also want the questions in bulleted lists, we will use the same <ul> & <li> tags.
A series of questions looks like below:
Code:
<ul class="QuestionList" id="General">
<li>Is there a limit to how much I can order?</li>
<li>Does Santa Claus really exist?</li>
<li>How much wood could a woodchuck if a woodchuck could chuck wood?</li>
<li>Why did I use such silly questions?</li>
</ul>
To add a new question, all you simply need to do is add another <li> tag between the <ul></ul> tags. E.g: <li>Another question?</li>
The class="QuestionList" part allows use to defines styles for the question parts. It also allows us to hide all the questions at once. So if you change this class name, you'll also need to change the JavaScript (there was a constant at the top). Just leave this as it is for now.
The part you
do need to pay attention to is the id="General" part. The ID attribute basically defines a ID for that element that the code can use to access it. Without this ID, the code couldn't find the element we need. The ID should be a unique name for each series of questions. In this example, I have used General. If I have doing the delivery questions, I would use an ID of Delivery.
So let's add some questions to our page...
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>
<ul class="SectionList">
<li>General</li>
<ul class="QuestionList" id="General">
<li>Do you accept Paypal payments?</li>
<li>Can I get a job at XYZ?</li>
<li>Where are you located?</li>
<li>I have a complain. Who do I contact?</li>
</ul>
<li>Delivery</li>
<ul class="QuestionList" id="Delivery">
<li>Do you ship internationally?</li>
<li>How long will my order take to deliver?</li>
</ul>
<li>Refunds</li>
<ul class="QuestionList" id="Refunds">
<li>My product is faultly. How can I return it?</li>
<li>I brought the wrong product. Can I get a refund?</li>
<li>How long does a refund take to process?</li>
</ul>
<li>Contact Info</li>
<ul class="QuestionList" id="ContactInfo">
<li>Can I contact you by phone?</li>
<li>Do you have a postal address?</li>
<li>Do you have any vacancies?</li>
</ul>
</ul>
</body>
</html>
Step 5 - Inserting The Code
By this stage we have our list of questions, all laid out nicely. Trouble is - They are all shown at once. We want them hidden!
This is done by adding two simple bits of JavaScript. First, we make sure the items are all shrunk when the page is loaded. This is done by changing the <body> tag to:
Code:
<body onload="collapseAll()">
onload defines a piece of code that runs when the page is first loaded. In this case - collapseAll(), the function that hides all our question lists. So whenever the page is loaded, all questions are hidden. (I could have done this in a simpler way by removing the onload and just having the QuestionList element in the CSS set at display: none. But as I wrote this on the quick, I did it the first way I though of.)
We also now to add the code that shows the questions when they are clicked on. This is done using by <li> containing the title's or your section to look like below:
Code:
<li onclick="expand('<QUESTIONLISTID>')">Subject</li>
You will need to change the <QUESTIONLISTID> part to be the same as the ID of the question list you wish to shrink. For example - note how the items in green are the same.
Code:
<li onclick="expand('Refunds')">Refunds</li>
<ul class="QuestionList" id="Refunds">
<li>My product is faultly. How can I return it?</li>
<li>I brought the wrong product. Can I get a refund?</li>
<li>How long does a refund take to process?</li>
</ul>
Here's the new code in the HTML page so you can see where it fits in...
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('General')">General</li>
<ul class="QuestionList" id="General">
<li>Do you accept Paypal payments?</li>
<li>Can I get a job at XYZ?</li>
<li>Where are you located?</li>
<li>I have a complain. Who do I contact?</li>
</ul>
<li onclick="expand('Delivery')">Delivery</li>
<ul class="QuestionList" id="Delivery">
<li>Do you ship internationally?</li>
<li>How long will my order take to deliver?</li>
</ul>
<li onclick="expand('Refunds')">Refunds</li>
<ul class="QuestionList" id="Refunds">
<li>My product is faultly. How can I return it?</li>
<li>I brought the wrong product. Can I get a refund?</li>
<li>How long does a refund take to process?</li>
</ul>[/b]
<li onclick="expand('ContactInfo')">Contact Info</li>
<ul class="QuestionList" id="ContactInfo">
<li>Can I contact you by phone?</li>
<li>Do you have a postal address?</li>
</ul>
</ul>
</body>
</html>