Ask Me Help Desk - Collapsing answers in list of questions.

Collapsing answers in list of questions.

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!

Hi Rick,

It's pretty easy to do. Just a little bit of JavaScript that changes a CSS property. I can write a quick example up for you at lunchtime (few hours). Don't want to be seen as slacking on work time :)

Lee,

Thanks, Lee!
Is using CSS required, then? I currently do not use it.

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 separate 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 ;)

Wow, Lee, you have truly gone the extra mile, Thank you!

I (aka ForeverNewbie or AlwaysConfused :p ) will walk through it and see if I can pick it up. At a glance I think I will be able to.

I'll post back with my test page.

Thanks again, Lee!
[insert wildly clapping smilie here]

I guess I'm still at a baby step :D

You said "The names in the expand() call and the ID of the QuestionList UL element must match"

This refers to the bold, here:

<li onclick="expand('listC')">Section Header</li>
<ul class="QuestionList" id="listC">

Is that right?

2. You said "The name for the QuestionList and function call must be unique"

I understand we're using QuestionList as the name for the QuestionList, but where is the name for the function call in this example?

As you can see, I am quite green on the terminology end of things.

Pending your answer, I will continue to play around... which is the great part: I can't ruin anything :p
My Testing Page

1st question - Yes you are right. The bits in bold were the parts I was saying have to match.

2nd question - The stuff you put in bold also has to be unique (only one pair with that name can appear). If you had two sets of "ListC" for example, clicking on one ListC would probably also expand/collapse the other one.

I've got an easy day tomorrow so I'll post a few other bits you might find will help - changing the cursor and changing the bullet points to anything you like.

Actually [My denseness will really come out here :D ], I haven't yet figured where to insert the questions.

Can you show me on one of them? For example, the answer to
Science > How many planets are in our Solar System?
At my testing page ?

Thanks a million, Lee!

Did you mean insert the answers?

You have two ways - either on the same page or a different page. For this example, we'll do it on the same page.

At the bottom of the stuff I had above, between the </ul> and the </body>, add the following:

Code:

<h2>Science</h2> <h4>How many planets are there in our solar system?</h4> <p>That's right - I'm too lazy to figure out/look up the answer!</p> <h4>Another question?</h4> <p>This would be an answer</p>

This would be a list of our questions and answers just printed out normally. Now we have to link the two together so that when you click an question, it jumps to the answer. You use normal <a> tags for this. Modify the question and answer part to look like below:

Code:

<h2>Science</h2> <h4><a name="howmanyplanets"/>How many planets are there in our solar system?</a></h4> <p>That's right - I'm too lazy to figure out/look up the answer!</p> <h4><a name="anotherquestion">Another question?</a></h4> <p>This would be an answer</p>

The <a name=""> tags create a bookmark that you can jump to.

Now change your Question list (the expanding one) to look something like the following:

Code:

<li onclick="expand('science')">Science</li> <ul class="QuestionList" id="science"> <li><a href="#howmanyplanets">How many planets in our solar system?</a></li> <li><a href="#anotherquestion">Another question?</a></li> </ul>

To jump to a bookmark you created just use a normal <a href=""> tag but instead of a web address like you normally use, use a # followed by the bookmark name.

And that's pretty much it. If you wanted to link to bookmarks on other pages, simply use something like

Code:

<a href="index.html#howmanyplanets">

.

I hope that was all correct! All from memory, no testing. Will test it when I get back from lunch. Off to the pub ;)

Yes, I meant insert answers. Thanks, Lee!

I'm excited to play with it. In fact, I'm cutting out of work early today to go home and do so.

So likely we'll be enjoying a cold brew at the same time.

Cheers!

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? :o

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

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

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

Wow, Lee, you have certainly gone the extra mile for this one.
Thank you so much! http://www.jackson8.com/images/amhd/clap.gif

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 :p

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

Thanks again, Lee. You're too awesome! http://www.jackson8.com/images/amhd/thumb.gif

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

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

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