FAQ Intro

 

FAQs are all closed by default when the page is first loaded.  When you click on one, it remains visible until another is clicked (you cannot close it - but you can hide the answer).

Setup instructions

To add FAQs to a page, add a single 'Show/Hide Holder' content type to that page.
Then add as many 'Show/Hide Item' content types as you like - each one needs a name, Question text, and Answer text.  The answer can be as long as you like and can contain images, tables, etc.
Each Show/Hide item must also be given a unique anchor id (so that the website will know which answer to show when the user clicks on a question).  You have to scroll to the end of the page to enter the Anchor information.

Collapsible Answers

Answers are normally not visible until you click on a question (unless you link directly to a question - see below).
But all answers will have the 'Hide Answer' button visible.  This is helpful when you have long answers (especially for mobile users).
It's not so necessary with short answers, as in the below example.

If you want to prevent an FAQ from giving users the option to collapse answers, do the following:
After you have created your FAQs, add an NUIG Code Only content type to the same section.
Name it 'Suppress Hide Answer buttons' and paste in the following code:

<script>$('p.hideFAQ').remove();</script>

Linking to FAQs

You can link directly to an FAQ by adding its anchor-id to the end of the web address of that page.  For example, if you wanted to link to the last FAQ on this page you would put /#dance at the end of the URL (https://www.universityofgalway.ie/t4training/examples/faqs/#dance).  If you look at this page in t4 you will see the anchor ID for that question is 'dance'. The page will load with the FAQ opened automatically

Demonstration

See below for an example of some FAQs.  Please click one of the headlines to see the response:

Options: Suppress 'Hide Answer' feature or Re-enable 'Hide Answer' feature


What movie is the quote “You had me at hello” from?

The classic 1877 novel “Black Beauty” is about what kind of animal?

“The Da Vinci Code” opens with a murder in which famous museum?

Which book about a band of rabbits became a bestseller in 1972?

What do I need to remember when saving an image for web use?

Are keywords and descriptions necessary anymore?