WP SITES

2950 Tutorials & 191 Plugins
Quote

Genesis F.A.Q Template With Accordion Style Toggle

—

by

Brad Dalton

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

7 responses to “Genesis F.A.Q Template With Accordion Style Toggle”

  1. Chris Connaker Avatar
    Chris Connaker

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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

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

      [code]if ( is_page_template(‘page_faq.php’))[/code]

      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.

      Reply
      1. Chris Connaker Avatar
        Chris Connaker

        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.

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

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

          Reply
          1. Chris Connaker Avatar
            Chris Connaker

            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!

  2. Genesis Toggle Page Template

    […] Genesis F.A.Q Template With Accordion Style Toggle […]

    Reply
  3. jQuery Accordion

    […] This tutorial contains a different version of the Genesis F.A.Q Template With Accordion. […]

    Reply

Was This Tutorial Helpful?