Genesis Accordion Javascript Template

Most of the accordion solutions already published here for members, use jQuery which is easier to use with WordPress as opposed to Javascript. In this tutorial, i’ll provide a template for Genesis which loads Javascript rather than jQuery.

All you need to do is select it from the Template menu for use on any single post, page or single custom post type.

Template Installation

There’s 4 simple steps after you download the folder below for logged in members :

Step 1 – From the download folder, upload the file named accordion.php to your child themes root directory and select the template named Accordion from the Template menu in any single post or page.

Step 2 – From the download folder, copy and paste the CSS from the style.css file to your child themes style.css file and clear caching.

Step 3 – From the download folder, upload the Javascript file named accordion.js to your child themes root directory. If you want to put this file in your js folder change the path to the file in the accordion.php file.

Step 4 – Add the following HTML to your WordPress text editor and swap out the text with your own :

You can also add some space with simple CSS :

.accordion {
    margin: 10px;
}

And heres what you get :

Here’s the download folder for logged in members :

Related Tutorials

• Accordion F.A.Q’s In Columns