One of the additional features available in Pro edition of Advanced Custom Fields is the Repeater field using which unlimited number of field groups can be populated in the admin.
In this tutorial I show how a FAQ repeater field having a Question text type and Answer Wysiwyg Editor type sub fields attached to a static Page can be set up such that answers slide down when the questions are clicked using jQuery Collapse.
We will also add Open all and Close all buttons that open and close all the panels at once respectively.
Screenshots:
With a FAQ row expanded:
Step 1
Create a FAQ field group and add FAQ repeater field in it with Question text sub field and Answer Wysiwyg Editor sub field. Here's an export file of the same.
cool 😉
How can i output my faq in an existing tamplate? The output in a page-faq.ph works great, but not in a template 🙁
Do you want to display FAQs in a static Page? If so, what is its slug? Does this Page use a Page Template? If so, what is its file name?
Now it works for me:
<!-- -->
<!– –>
Yes, i want to display FAQs in a static Page Template (page_tabs.php).
Hi Sridhar,
one qusetion.
My HTML-output looks like this:
Text
Why do I have two href’s inside H3-tag?
Thanks,
Alex
Hi Sridhar,
I thought I had followed all of the steps, but I seem to have missed something, as I’m getting just a blank page – http://mercerracewaypark.com/info/faqs/
I’m guessing I did something wrong with the ACF Pro plugin as it is new to me – just purchased it to try this out.
Any suggestion for what I may have done wrong?
Hope you have named the file in Step 4 as
page-faqs.phpand notpage-faq.phpbecause the slug of your static Page isfaqs.Yes, I caught that and made sure I had it correct.
I also tried page-42.php, as that is the page ID for FAQS
If you would like me to take a look inside, send me your WP and FTP logins using the contact form, http://sridharkatakam.com/contact/.
Fixed.
I changed
have_rows( 'faq' )to
have_rows( 'faqs' )in page-42.php since your Field Name is
faqsand notfaq.Hi Sridhar, here my FAQ page, everything works fine, just the Font Awesome icons are showing up double : http://wp.centre-europa.de/faq
I have double checked, all the same custom names and filenames like you, but still:-(
my mistake;-) everything is fine now. I had 2x the jquery.collapse.js and that made double trouble. One time in funktions.php and one time in Extender;-((
Okay, I think I am losing my mind! I have tested this tutorial in the past on a local dev site and it worked perfectly! Now when I am trying to put it on a client’s staging site, all works except the for collapse…..all FAQ’s are listed and open, the JS doesn’t seem to be working…
I am at a lost, can anyone offer some insight?
http://staging.pafrs.us/forms/faq/
Thanks!
Another odd thing happening, is that in Firefox, the page seems to redirect to something jquery related, and then generates a 404 error, but the same does not occur in Chrome or Safari on Mac….
http://staging.pafrs.us/forms/wp-content/themes/genesis-sample/js/jquery.collapse.init.js is not present. Can you place jquery.collapse.init.js in
jsdirectory and check?Hi Sridhar,
I just checked and found i had it spelled wrong! I had jquery.collapse.ini.js! Can’t believe all the time I looked at it yesterday I did not see the ‘t’ was missing! I feel like an fool now!
Once I changed the spelling, it worked the first shot!!!!
Thanks for response!
Ken
Hi
I have followed all of your steps but I do not get any output.
See http://www.healthcenterxl.nl/onze-methode/faq/
do you have any idea because I cannot find it.
Thanks!
Found it. It was de “faq” versus “faqs”
[…] In the past, I showed how jQuery Collapse can be used to display ACF Pro Repeater fields in the form of an open/close or expand/collapse section in Genesis here. […]