Need a FAQ layout

[tracknut]

I'm a bit stumped trying to come up with a slick way to put together a FAQ page. I'd like to be able to list the questions (about 15 of them) and have the answers "pop up" in some way, rather than a long sequential list of Q&A that scroll on and on. And I'd prefer to just do it with HTML&CSS, not JS.

Does anyone have a cool layout they'd like to share? I'm not really looking for code, just example FAQ pages that are well done.

Thanks
Dave

[keyboardgeek]

If you have access to Fantastico you'll find some good FAQ scripts with examples to install there.

[tracknut]

Care to give me a link? I ended up at a personal ads site...

Thanks
Dave

[keyboardgeek]

Fantastico is a service provided through most cPanel accounts. Check with your hosting provider. Don't Google it, you'll need direct access to your own cPanel!

[tracknut]

Got it, thanks. Maybe my question was worded poorly, but I'm looking for a FAQ layout that can be implemented in html & css, for about 15 questions. The FAQ that Fantastico provides is a database-driven one, with Javascript doing nifty stuff on the screen - all well and good but a bit heavier than I'm looking for.

Dave

[keyboardgeek]

Ah right. I can't really help with that one. Are you looking for a FAQ that has collapsing paragraphs, or just simple layout examples.. Header, Paragraph, etc... There are some really cool CSS examples on the net that show you how (with a little javascript) to collapse paragraphs when a title is clicked etc.. But as for the general examples, I'm sorry can't help! Good luck.

[tracknut]

I'm looking for design ideas, but ideas that can be implemented in html & css w/o Javascript. I try not to use JS for things that would break the site when JS isn't available, so I'd rather not use it here. Though I do like the FAQ's that pop up the answer when the question is clicked, that seems to be a growing standard way of doing it.

Thanks for giving it a go anyway :)

Dave

[keyboardgeek]

One answer might be here: http://meyerweb.com/eric/css/edge/popups/demo.html
Also checkout the tutorial for adding Icons ;)

Added:

Just to mention that this css popup example can be adapted by removing the links. I'd put the questions in a DIV on the right, while the answers appeared in a Div on the left, or vise versa. Especially as you're only going to be displaying a small list. You could go all crazy and create a background blackboard for example, where the answers would appear each time a question is hovered over, and the questions could be on a notepaper background.. I dunno, just throwing my random geekness thoughts out there !

[tracknut]

Yep, that one has promise - thanks!

Dave

[cbVision]

I'm a fan of JQuery Accordion for FAQ. It's easy to implement. If JavaScript is disabled, it will still look fine, everything should just be expanded. (everyone has javascript enabled now-adays anyway)

http://docs.jquery.com/UI/Accordion

[tracknut]

I'll look that one over too, cbVision. If the default (non JS) version shows all the text, than it would fit my requirements too.

Thanks
Dave

[tracknut]

To follow-up here, I tried both the above options. The CSS one does end up working, but is a bit tough on layout. The Jquery JS version shows promise, but when I dug into it, it's a spaghetti of code. 4-5 JS include files are needed, documentation was tough to wade through (either non-existent or always different from how their examples are coded).

So I did some googling and found a similar JS accordion script at http://www.leigeber.com/2008/04/lightweight-javascript-and-css-accordion/. It's very lightweight, uses only one JS include, and a very short CSS. And most importantly does still show the whole FAQ if JS is not enabled on the client. That's the one for me!

Thanks for the help
Dave

[cbVision]

Perfect! Hopefully that works out for you then.

Thanks for the link to the lightweight accordion.