Collapsing answers in list of questions.

RickJ · Sep 14, 2005, 08:01 AM

See this example:
http://www.copyright.gov/help/faq/

It is nearly exactly what I want to do - except that in this example, many of the questions open up to a 3rd "level".

I want to make a FAQ page just like it.

I'm playing with some similar ideas
http://www.thriftysites.com/notes/co.../frompete.html (hover over the questions)
and
http://www.thriftysites.com/notes/collapsinglist/2.html (click the questions)
but neither is exactly it.

Is there an easy way to do it like they do it on the copyright page?

Thanks!

RickJ · Sep 17, 2005, 05:07 PM

I can see I'm close - but missing something: Testing Page

...and why does the stuff between </ul> and </body> show up on the page?

Am I just brain-dead?

LTheobald · Oct 20, 2005, 05:35 AM

Whoops, sorry Rick - I completely missed this reply. Are you still having troubles with it?

RickJ · Oct 20, 2005, 07:32 AM

Thanks. I see why you missed it I think, as my last post was the 1st post on a new page.

Anyway, I've played with a few of them and like yours the best.

I like that I can categorize them and put the questions in the categories...but it's all so new to me, I just don't understand how to insert the answers.

I'm looking for the simplest of the two methods you mention.

I do appreciate anything you can share or show.

Here's the page:
http://www.thriftysites.com/notes/co...t/fromlee.html

LTheobald · Oct 21, 2005, 02:44 AM

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 off 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 thigns 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 inbetween 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

This
list
here!

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 inbetween <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 inbetween 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 simplier 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>

RickJ · Oct 21, 2005, 03:25 AM

Wow, Lee, you have certainly gone the extra mile for this one.
Thank you so much!!

I will 1st study the page I've got - to see your steps within it - then walk through your steps from scratch...

...cross my fingers, take a deep drink of a cold brew - and see if I can put it together

I'll enjoy leaving work early today to play with it!

Thanks again, Lee. You're too awesome!

LTheobald · Oct 21, 2005, 04:41 AM

No problem Rick

If you still are having troubles - I could always give you a hand over an instant messenger. That way I can just sort out the last few bugs there and then.

First time a post I have done has hit the 10,000 character limit :P

RickJ · Oct 21, 2005, 05:00 AM

LOL, I know I've never seen a 10K-er.

I'll see where I can get with it when I can escape from the office.



At Ask Me Help Desk you can ask questions in any topic and have them answered for free by our experts. To ask questions or participate in answering them you must register for a free account. By registering you will be able to: Get free answers from experts in any of our 300+ topics. Accept money for answers that you provide. Communicate privately with other members (PM). See fewer ads. Sign Up!