• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

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

Accordion & Toggle

Reader Interactions

Comments

  1. Jill Terry says

    August 19, 2017 at 6:35 am

    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!

    Log in to Reply
    • Brad Dalton says

      August 19, 2017 at 1:43 pm

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

      Log in to Reply
    • Brad Dalton says

      August 19, 2017 at 2:57 pm

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

      Log in to Reply
      • Jill Terry says

        August 20, 2017 at 3:07 am

        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?

        Log in to Reply
        • Brad Dalton says

          August 20, 2017 at 3:22 am

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

          Log in to Reply
        • Brad Dalton says

          August 20, 2017 at 3:28 am

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

          Log in to Reply
          • Jill Terry says

            August 20, 2017 at 6:05 am

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

          • Jill Terry says

            August 20, 2017 at 9:05 am

            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 🙁

          • Brad Dalton says

            August 20, 2017 at 3:59 pm

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

          • Brad Dalton says

            August 20, 2017 at 4:12 pm

            Just tested in Boss Pro and it works

        • Brad Dalton says

          August 20, 2017 at 4:21 pm

          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.

          Log in to Reply
          • Jill Terry says

            August 21, 2017 at 12:10 am

            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!

          • Brad Dalton says

            August 21, 2017 at 2:06 am

            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.

          • Jill Terry says

            August 21, 2017 at 2:00 am

            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.

          • Brad Dalton says

            August 21, 2017 at 2:04 am

            Mac

  2. Chris Connaker says

    July 20, 2017 at 9:45 pm

    Perfect! Thanks Brad.

    Log in to Reply
    • Brad Dalton says

      July 20, 2017 at 9:49 pm

      You’re welcome Chris.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.