Collapsing answers in list of questions.

RickJ · #1 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!

LTheobald · Sep 15, 2005, 12:46 AM

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,

RickJ · Sep 15, 2005, 02:13 AM

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

LTheobald · Sep 15, 2005, 04:31 AM

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

RickJ · Sep 15, 2005, 05:54 AM

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

I (aka ForeverNewbie or AlwaysConfused

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

RickJ · Sep 15, 2005, 06:26 AM

I guess I'm still at a baby step

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

My Testing Page

LTheobald · Sep 15, 2005, 02:23 PM

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.

RickJ · Sep 16, 2005, 02:54 AM

Actually [My denseness will really come out here

], 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!

LTheobald · Sep 16, 2005, 03:20 AM

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

RickJ · Sep 16, 2005, 10:32 AM

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!



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!