This tutorial contains a different version of the Genesis F.A.Q Template With Accordion.
This version displays different icons when opened and closed as you can see in the following animated gif image.
The jQuery is different and so is the HTML and CSS.
You can also use the HTML anywhere rather than being restricted to using the template. Use in a widget, page, post or anywhere else on your site.
Also works in any theme, not just Genesis.
BobGillespie says
Hey Brad,
Using this accordian and works 100%, Trying to use for Agreement text which is very long when opened, how can I add a link to bottom of the .opened div to close it?
Thanks
Bob
Brad Dalton says
Hello Bob. I’m working on this at the moment https://jsfiddle.net/braddalton/uku9uw1k/41/
BobGillespie says
Hi Brad,
Almost works, getting a js error using your code from fiddle
Uncaught TypeError: $ is not a function
at accordianReduce (closeagree.js?ver=1.0.0:2)
at closeagree.js?ver=1.0.0:10
closeagree.js is my new js filename , enqueueing like this:
wp_enqueue_script( ‘closeagree’, get_stylesheet_directory_uri() . ‘/js/closeagree.js’, array( ‘jquery’ ), ‘1.0.0’ );
I am pretty numb with this stuff so couldn’t hack it.
Running code in Gravity Form demo here:
https://medicalmarijuanaservices.ca/beta-form-test-progress-bar/
Thanks
Bob
Brad Dalton says
Try this https://wpsites.net/download/67304/
Add the HTML to your editor and the .php & .js file to your themes root directory.
Will publish a tutorial later on today.
BobGillespie says
Still not working so will wait on your tutorial. Gotta run for today so can’t test until tomorrow.
Thank you!
Best
Bob
Brad Dalton says
Here it is https://wpsites.net/web-design/jquery-accordion-with-link-to-close-long-items/
Uses wp_head hook to load the js
Note : Installation support is included in membership so if you can’t get it working, send me a copy of your theme and i’ll add it for you.
Chris Connaker says
When I put the jquery code into faq.js in my child theme /js directory, this doesn’t work. When I place the same code in the JS part of Genesis Extender, so it loads all the time, then it works.
Is this the correct path for the file?
wp-content/themes/monochrome-pro/js/faq.js
Chris Connaker says
I may have found the issue. Firebug says it’s still loading version 1.0.0 of that file and it shows the code from the other accordion list you published.
Now to figure out how to version the files.
Chris Connaker says
I added ?1.0.1 to the end of ‘/js/faq.js’ in functions.php, so it now reads –
‘/js/faq.js?1.0.1’
This made browsers load the new version of the file. And, everything works,
Brad Dalton says
Here’s the full code i tested https://wpsites.net/web-design/add-accordion-f-a-qs-to-after-entry-widget-in-genesis/
Brad Dalton says
Yes
James Hahn II says
Hi Brad, I have followed all of the instructions here. I am able to get the dashicons on the page along with the answers, but the js script doesn’t appear to work for me. The page is pulling the dashicons, but the accordion function does not work.
I also followed the directions on “Genesis F.A.Q Template With Accordion Style Toggle” precisely and had similar issues. Except instead of displaying the answers, the js script just forced my browser to jump to the top of the page.
Would love you assistance.
Thanks!
James
Brad Dalton says
Hello James. What theme are you using?
James Hahn II says
Thanks for the quick reply, Brad. We’re using Enterprise Pro for these clients.
Brad Dalton says
Just tested the code and they both work. Link to your site please. Otherwise, please FTP hostname, username and password or a copy of your theme with the code installed.
I assume you added the faq.js file to your js folder?
You can inspect the page in Chrome and it will give you a red cross which provides the error which will probably be 404 not found.
James Hahn II says
There is the problem. When I followed these instructions I named the file “accordion.js” instead of “faq.js”. Looking at what we added to the functions.php file, I now see that mistake it impossible for the enqueue script to call the javascript. Wow! I’m learning how to read php. This is exciting!
Thanks for your help and patience, sir!
Brad Dalton says
You’re welcome.