Setting Up a Q&A Page on Your Website
Visitors 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
If you need help then there's an advice page for joining here
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.
Want free web hosting? All AMPband members qualify for free web hosting worth £59.88pa
Back to 'Ask Dave'