Hi folks.
I've read a few threads on creating an FAQ page, one of which the OP was looking for a styled FAQ page, with headings and questions which, once the question is clicked on, the answer displays below.
Here's how I've achieved it, very simple, yet effective. See the attachment for how this appears - the style (colour, font, etc) can all be styled for your own site.
Create a new content Page, for the Description, click the HTML icon on the WYSIWYG editor to use the HTML Source Editor.
Copy and Paste the following code, changing the styles where it suits your colour scheme, then Save:
NOTE:
Although I have created this with inline styles (eg. <h2 style="background-color: #000000;">), I actually integrated these styles with my custom CSS file and referenced the style accordingly (eg. <h2 class="faq-question").
The 'jschange' value and the 'div id' must match and must also be unique, note the value 'banana' in the example below - it must be unique for each question/answer.
I hope this is useful for some others, I have collected the most commonly asked questions for my store and used this effect to create an FAQ page, which has a lot of questions, but appears very slimline.
Attached Thumbnails