Frequently asked questions pages are part of practically any client site project, but tend to be the most boring ones to design. Typically they feature a list of anchors at the top for the questions that jump to the answers farther down the long, uninteresting page. But with a little Ajax (created using a handy Spry widget in Dreamweaver), FAQ pages can look and function a lot better.

As we talked about in an earlier post, Spry widgets allow you to create dynamic features with Ajax, like tabbed or accordion-style interfaces. And accordion-style interfaces are perfect for FAQ pages…

1) Start with a new document, or the main editable area of your favorite DWT template. In the Insert bar (Window > Insert) click the Spry tab and then the Spry Accordion button.

Click once on the Spry Accordion button to get started.

This does a few things. First, you’ll see in Design View the beginnings of your accordion design. In your CSS Styles panel, you’ll see rules for the accordion that you can change later. And in Code View, you’ll see that two files are created and linked, the CSS file and a JS (JavaScript) file. When you upload your page to your server, you’ll need to make sure these files come along for the ride and remain in the proper file location.

2) Before doing any styling, get your FAQ content in, starting with your first question in the Label 1 area, your first answer (and any other content you like, like images or links) in the Content 1 area, and your next question in the Label 2 area. When those are in, click on the eye icon in the Label 2 area—this will open up the content area for your next answer.

Click the eye icon to hide the current content area and show the next one.

Chances are, your FAQ will have more than two questions, but before you get any further, test your accordion in a browser to see how it works. Clicking a question will elegantly slide open a panel with the answer without reloading the rest of the page elements (the beauty of Ajax).

Click a label in your browser to slide open its content area.

3) Time to add some more questions! Click the bright aqua “Spry Accordion: Accordion 1″ tab at the upper right of your content. This will reveal handy tools in the Properties Inspector (Window > Properties) for adding labels and content areas. Click the plus as many times as you need to add questions, and use the arrows to arrange them. Then continue on, clicking the eye icons for each label and adding your content.

Test again when all of your content is in. The accordion feature really shines when there are lots of labels and panels.

4) When you’re happy with the content, you can customize the style with the CSS rules already created for you. Adjust the size, margins, color, and other features in your CSS Styles panel, remembering to adjust the rules for open panels, closed panels, and hover features.

I like to add my type formatting here if it will vary from that of the rest of my site, and I like to change the height of the content areas to 100% (rather than the default pixel height) so the panel height conforms to the content within in. You can even eliminate the borders if you choose to avoid a boxy look. It’s all up to you, and is no different than any other CSS styling you’re used to.

Change your content height to 100% for perfect sizing with any of your FAQ answers.

Give it a final test, remember to upload the CSS and JS files along with the HTML doc, and you’re all set. Your new FAQ will look much sleeker and more streamlined, delivering answers quickly and without the usual anchors and walls of text.

This entry was posted on Friday, September 21st, 2007 at 1:19 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.