WP SITES

Log in

Add Accordion F.A.Q’s To After Entry Widget in Genesis

—

by

Brad Dalton

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 :

Register for full access

Comments

17 responses to “Add Accordion F.A.Q’s To After Entry Widget in Genesis”

  1. Jill Terry Avatar
    Jill Terry

    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!

    1. Brad Dalton Avatar
      Brad Dalton

      Please send login details. I didn’t see the js file, might be wrong, but where did you upload the file?

    2. Brad Dalton Avatar
      Brad Dalton

      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’ )

      1. Jill Terry Avatar
        Jill Terry

        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?

        1. Brad Dalton Avatar
          Brad Dalton

          I didn’t see the js file, might be wrong, but where did you upload the faq.js file?

        2. Brad Dalton Avatar
          Brad Dalton

          Also, please send me FTP hostname, username and password.

          1. Jill Terry Avatar
            Jill Terry

            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 :)=

          2. Jill Terry Avatar
            Jill Terry

            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 🙁

          3. Brad Dalton Avatar
            Brad Dalton

            I’ll test it locally using Boss Pro and try and troubleshoot the issue.

          4. Brad Dalton Avatar
            Brad Dalton

            Just tested in Boss Pro and it works

        3. Brad Dalton Avatar
          Brad Dalton

          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.

          1. Jill Terry Avatar
            Jill Terry

            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!

          2. Brad Dalton Avatar
            Brad Dalton

            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.

          3. Jill Terry Avatar
            Jill Terry

            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.

          4. Brad Dalton Avatar
            Brad Dalton

            Mac

  2. Chris Connaker Avatar
    Chris Connaker

    Perfect! Thanks Brad.

    1. Brad Dalton Avatar
      Brad Dalton

      You’re welcome Chris.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.