This solution is based on a question from a registered member who wanted to use a tutorial containing code for a f.a.q template, in a widget area.
The code in this tutorial enables you to paste HTML into a after entry text widget and display a list of links to hidden content which is displayed when the link is toggled:
The code uses a small amount of jQuery which you can load conditionally on single posts only and also includes a handful of CSS rules for styling.
You can change the icons from + and – to any other dashicons in the CSS simply by changing the number 132 and 460 for each icon as seen in the following CSS declaration.
content: "\f132";And float the icons right like this :
Here’s the demo video
Demo Video
Here’s the code for logged in members :
Hi Brad. I’m trying to get this to work in a normal page but am failing! You can see my testing page here: http://utterlydogs.com/accordion-test/
I enclosed in p tags as advised above. I have tried with and without p tags, but just doesn’t work!
Please send login details. I didn’t see the js file, might be wrong, but where did you upload the file?
Not sure if this is the problem however i just added this note to the tutorial :
The PHP code above only loads the jQuery on single posts. If you want to use the Accordion on pages, make sure you change the conditional tag is_singular( ‘post’ ) in the above PHP code so the jQuery loads where you need it. For pages, use is_singular( ‘page’ )
I made a post test, but same thing. One thing that now concerns me is that I want to use it on a form that is created by the Toolset plugin. I am wondering if it won’t work on that?
I didn’t see the js file, might be wrong, but where did you upload the faq.js file?
Also, please send me FTP hostname, username and password.
It’s uploaded to my child theme’s js folder (boss-pro). Definitely there.
Could you please delete username and password from my previous comment :)=
HI Brad, OK, it must be the theme! I changed theme from Boss-Pro to Magazine and the accordion now works!
So I guess Boss-Pro is one theme that I’m not going to use 🙁
I’ll test it locally using Boss Pro and try and troubleshoot the issue.
Just tested in Boss Pro and it works
I uploaded a copy of the Boss Pro which i tested locally so all you need to do is add the HTML. Also, please link to the page so i can inspect.
Thanks Brad. It works! http://utterlydogs.com/uncategorised/accordion-test-post/
OK, this is VERY strange and has happened before, where I download one of the latest themes and some customisations just do not work. I doubt if you remember but I recently had this when I downloaded the latest version of Altitude. You had it working fine. I downloaded all files several times but it just wouldn’t work with the version I downloaded. You sent me your copy of the theme and the customisation worked! Not good for me!
What you can try next time is to right click and inspect/ If you see a red X that means there’s a jQuery problem.
Could I ask if you work on an iMac or PC? I know another site whose zip files have a hiccup when downloading to a mac.
Mac
Perfect! Thanks Brad.
You’re welcome Chris.