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.
This tutorial provides the steps for showing a FAQ section from static HTML content using jQuery Collapse.
Screenshots:
with all the panels closed:
with a panel open:
Screencast:
Step 1
Add HTML (either in WordPress editor or in a PHP template) in this format:
Great tutorial, means I can use one less plugin. Because I only need the scripts on one specific page I created a page template instead of putting it in the functions.php.
This is great. I can see myself using this a lot on a current project.
Question, though. Is there a way (or rather, how would you) to set up the questions in a row of three, and have the answers appear beneath, full-width, on click.
I’ve tried to do it here – http://vdocs.co.uk/#front-page-6 but ended up using absolute positioning and some CSS hackery. I think the solution is to have the questions and answers in separate divs and then have the question action the answer, but I’m unsure how to implement.
Thanks Sridhar.
Love it. I can now get rid of a plug-in. One question: How do you maintain indent of question? Right now if a question wraps to a second line of text it is under the dashicon. Is there anyway to maintain intend with the first line of the question?
URI: http://ccemmaus.org/faq-test/
I created a page template that pulls the faq.css and the JS files only when the FAQ page is accessed. Great tutorial my friend! A+
I tried to implement this, but it doesn’t seem to be creating panels that open/close. I’m not sure if there’s something from my theme (Digital Pro) that’s interfering. Can you suggest how to fix it? Here’s the page I tried it on: http://www.seventh-row.com/subscribe/
jquery.collapse.js has not been uploaded to your child theme’s
jsdirectory.i.e., http://www.seventh-row.com/wp-content/themes/digital-pro/js/jquery.collapse.js is missing.
ah marvelous, thank you! I see I misnamed it.
Just a note: to have a panel open on load, add the class “open” to the h3.
ie
Thanks
Dom
jQuery Collapse is a great find in a script. I used it in a recent project for the public FAQ and a private newsletter to keep the sections collapsed to limit the amount of scrolling. It was great that I could use the same jQ script for both, with just a different init script. And it’s accessible! Thank you, Sridhar!
This works great!
Instead of enqueuing the scripts, i added them to the header scripts box on my FAQ page.
One question:
In the sample texts it says “Yes. You can also use it like an Accordion where only one panel will be open at a time.”
Which changes would be required to accomplish that?
Thanks in advance!