—
by
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.
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
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
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.
Still not working so will wait on your tutorial. Gotta run for today so can’t test until tomorrow.
Thank you!
Best
Bob
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.
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
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.
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,
Here’s the full code i tested https://wpsites.net/web-design/add-accordion-f-a-qs-to-after-entry-widget-in-genesis/
Yes
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
Hello James. What theme are you using?
Thanks for the quick reply, Brad. We’re using Enterprise Pro for these clients.
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.
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!
You’re welcome.
[…] jQuery Accordion […]
[…] jQuery Accordion Showing Different Icons for Show & Hide […]
Was This Tutorial Helpful?