AMPband - Setting Up a Q&A Page on Your Website

Setting Up a Q&A Page on Your Website

Website FAQsVisitors to your website are usually looking for information. A 'FAQ' (Frequently Asked Questions) page is a great way to enable them to quickly find exactly what they are looking for.

If you have just a few Q&As then you can simply publish them together on a page. If you have a lot more then it makes sense to group them into subject areas.

You can have the answer displayed below each question however this can make for a long page. The preferred method is for each question to be a clickable link and the answer becomes visible when the visitor clicks on the question.

There are many ways to achieve this. Here on the AMPband site we did use JavaScript until recently but this does become an issue if a browser has JavaScript disabled. During a recent search for an alternative we found one that just uses CSS to produce the desired effect and you can see the results of our new system on the Questions Page (you probably used it to get here). The other trick we liked is that as a new question is selected, the previous one closes 'automagically'!

To see how we did it you can either right click on this page and then select 'View Page Source' (also see the Technical Advice section further down this page to help you) or visit the authors page.

What to Cover:

Think of the most common questions you are asked. These could include:

  • What genres of music do you play?
  • What type of functions do you perform at?
  • Can I come and see you live before I book?
  • How much do you charge?
  • Do you require a deposit?
  • How long do you normally play for?
  • Can you provide music inbetween sets?
  • Are you loud?
  • How long do you need to setup?
  • Do you have Public Liability Insurance?

Example 'Drop-down' Q&A

Joining us is easy and only takes a few minutes. You can start by selecting the number of members in your band here.

If you need help then there's an advice page for joining here

The previous one 'automagically' closes so that the page doesn't become too long with open answers. This one will also close when a new question is selected.

Technical Notes

If you are using the source of this page to find how this works then look in the header for the 14 lines of CSS code. You can copy this and also make changes to the background colours and other design elements in this section. Comments have been included in the source code to help locate the start and finish of the relevant parts of coding.

The actual Q&A section starts with div class="row1" (which has the comment "Start Q&A Block"). To add extra questions take the full tag section that starts div class="tab" (from comment "Start Single Question Block" to "End Single Question Block"), copy it and paste it immediately below the first block (ie so that it is still within the "row1" and "col1" div) and change the id="rd1" to id="rd2" (2 places).

You can repeat this process for the total number of questions required - changing the "id=" for each one to the next number in sequence.

Back to 'Ask Dave'