• 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

Genesis F.A.Q Template With Accordion Style Toggle

This tutorial provides all the code which creates exactly what you see in the following screenshot:

faq

The template enables you to create a list of unlimited questions and answers which are displayed when the user clicks the title of the question or the icon next to the title.

The icon can be changed easily and you create all your questions and answers in your WordPress editor.

The frequently asked questions template has been included in the Sample theme for ease of use or you can install it in any Genesis child theme.

All you need to do is copy and paste 4 snippets of code and you’re set.

There’s 4 types of code used to make this template:

  1. HTML
  2. CSS
  3. jQuery
  4. PHP

Register for full access

Related Tutorials

  • jQuery Accordion Showing Different Icons for Show & Hide
  • Genesis Page Template With Accordion Style Toggle Widget Areas

Accordion & Toggle

Reader Interactions

Comments

  1. Chris Connaker says

    July 20, 2017 at 7:07 pm

    Any way to get this to work in a widget? I tried pasting the HTML into a text widget, but it wouldn’t work.

    Log in to Reply
    • Brad Dalton says

      July 20, 2017 at 7:14 pm

      Its not coded to work in a widget however it may work if you remove this line of PHP code

      if ( is_page_template('page_faq.php'))

      That line restricts the jQuery to only load on the page template. Not sure where your widget is coded. You could change the conditional to match the page where your widget is called.

      Log in to Reply
      • Chris Connaker says

        July 20, 2017 at 8:07 pm

        I tried removing that line of code, but then it doesn’t really work on any page. The FAQs are automatically expanded and I lose the formatting and dash icons.

        I’m trying to put a list in a widget that appears in “After Entry” on single pages.

        Log in to Reply
        • Brad Dalton says

          July 20, 2017 at 8:10 pm

          Try this solution which i just tested. https://wpsites.net/wordpress-themes/jquery-accordian/

          Log in to Reply
          • Chris Connaker says

            July 20, 2017 at 9:04 pm

            The one you linked to works pretty well. I have one issue with it, but I’ll post it over on that page. Thanks Brad!

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.