How to Create A Toggle FAQ List

I was looking at StudioPress website and noticed a sleek FAQ section on their ‘Create A Site’ page. I thought it was an excellent solution to an FAQ, so I dove into the Inspector and began to understand how it was put together. It used a simple javascript to change a class to show or hide the answer to the question once clicked. I had a need for a similar solution, so I thought I would share my experience.

The Code

First create a file for the javascript in your theme. I generally recommend using a directory for all javascript. In this example, I called the file toggle.js. In this file place the following javascript:

Now we need to enqueue that file into our theme. So open your themes function.php and add the following:

This now loads the toggle.js script to our website. You’ll also notice we have included the ‘dashicons’ from WordPress. These icons are preinstalled with WordPress, but to use them on the front end of your site, you need to enqueue them in functions.php.

Now its time to add the HTML on the page.

You can ad as many <li> list as you need for your list. You would simply change the Question and the Answer area to match your specific needs. This should be added in the editor section of your WordPress post or page. If you add HTML in your visual editor, WordPress assumes you want to display the information as text.  So make sure to click the Text tab in the editor and place the HTML in the text editor. You can jump back to the Visual Editor to make edits your questions and answers.

Now its time to update the style.css file in your theme.

Test It Out

Now you should be able to publish your page or post and you will have this sleek toggle feature for your FAQ. It has plenty of possibilities.

Let me know what you think in the comments below. If you have any questions or suggestions for other tutorials, please leave those in the comments below also.