How to Add an Animated FAQ to Any WordPress Site Without a Plugin

Adding a Frequently Asked Questions (FAQ) page to a website is often a common requirement. The most basic FAQs can just be a simple list of plain text with the questions and corresponding answers laid out in one continuous list. However, we can do better than that, and without a plugin in sight!

Adding a dash of JavaScript into the mix can dramatically improve the appeal of your FAQ page. And it’s easier so setup than you might think!

There are lots of different styles and layouts for dynamic FAQs but a popular method is to have a list of questions ONLY displayed by default. The answers are then animated into view when a question is clicked on.

Let’s look at the basic structure of our HTML markup first:

<div class="faq-wrapper">
  <dl class="faqs">
    <dt>Question 1</dt>
    <dd>Answer 1</dd>
    <dt>Question 2</dt>
    <dd>Answer 2</dd>
    <dt>Question 3</dt>
    <dd>Answer 3</dd>
  </dl>
</div>

As you can see it’s pretty simple. We have an outer wrapper div element and inside is our FAQ container. FAQ items are split into questions and answers. Each question goes inside a <dt> element and each answer is added to a corresponding <dd> element.

Now for the styles. I’d recommend adding these via a child theme style sheet:

.faq-wrapper {
  margin: 25px 0;
}

dl {
  line-height: 170%;
  margin-bottom: 20px;
}

dl, dt, dd {
  margin: 0;
  padding: 0;
}

.faqs dt {
  font-weight: 700;
  background: #f1f1f1;
  position: relative;
  padding: 6px 14px;
  margin: 15px 0;
  border-radius: 4px;
}

.faqs dd {
  display: none;
}

.faqs dd {
  padding: 0 0 15px 7px;
}

.faqs .hover {
  cursor: pointer;
}

The HTML and CSS shown above will display the FAQs in a list but with no way to display the answers! Clicking on each question doesn’t do anything yet. Let’s fix that.

Inside the FAQ page editor add the following at the top:

<script>
  jQuery(document).ready(function($) {
    $('.faqs dd').hide(); // Hide all DDs inside .faqs
    $('.faqs dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
        // Add class "hover" on dt when hover
        $(this).next().slideToggle(150); // Toggle dd when the respective dt is clicked
    });
  });
</script>

Now, when you click on any question the answer will slide into view. If you click the question again the answer will slide up and disappear. Nice!

It would be even better if we could add a button to toggle ALL FAQs so that when clicked it expands and reveals all FAQ answers, and when clicked again hides them.

To do this we need to add HTML for our toggle button:

<a href="#" class="faq-button more-link">Toggle All FAQs</a>

Now let’s modify our JavaScript to toggle all FAQ items when the button is clicked:

<script>
  jQuery(document).ready(function($) {
    $('.faqs dd').hide(); // Hide all DDs inside .faqs
    $('.faqs dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
        // Add class "hover" on dt when hover
        $(this).next().slideToggle(150); // Toggle dd when the respective dt is clicked
    });
    $('a.faq-button').click(function(){
        $('.faqs dd').slideToggle('normal');
    });
  });
</script>

If you have many FAQs then you might want to split them into separate sections rather than one long list.

Fortunately our FAQ solution supports this. Using the same JavaScript and CSS shown above you can display multiple FAQ lists on the same page with the following HTML:

<h3>FAQ List One</h3>
<div class="faq-wrapper">
<dl class="faqs">
  <dt>Question 1</dt>
  <dd>Answer 1</dd>
  <dt>Question 2</dt>
  <dd>Answer 2</dd>
  <dt>Question 3</dt>
  <dd>Answer 3</dd>
</dl>
</div>

<h3>FAQ List Two</h3>
<div class="faq-wrapper">
<dl class="faqs">
  <dt>Question 4</dt>
  <dd>Answer 4</dd>
  <dt>Question 5</dt>
  <dd>Answer 5</dd>
  <dt>Question 6</dt>
  <dd>Answer 6</dd>
</dl>
</div>

You can add as many lists as you wish.

All this works fine but it’s not very elegant to insert JavaScript directly into the page editor. WordPress standards recommend you enqueue the JavaScript instead. This ensures it is added correctly to your site header on each page load.

However, if you enqueue it without any conditional code then it will be loaded on EVERY page and not just on your FAQ page.

It’s fairly easy to use the is_page() function to enqueue your FAQ script only on the required page but this is reliant on you knowing the FAQ page id and hard coding it. Not ideal.

A Better Way

A more flexible solution would be to allow you to specify any page as your FAQ page via the WordPress admin which would then have the JavaScript added automatically to that page ONLY. And without the need to add code manually!

This is the method used in all WPGO themes. We’ve created an FAQ page template specifically for this purpose which is included by default with all our themes. Simply select the ‘FAQ Page’ template from the drop down and add your FAQ HTML via the page editor.

Because the FAQ page template enqueues the necessary JavaScript automatically it allows you to focus on adding your list of FAQs. The FAQ JavaScript even includes the code to toggle all FAQs. Simply add-in the toggle button HTML to automatically toggle all FAQs. All the necessary CSS is added for you too!

You can see a full live FAQ demo in the Minn theme here.

So, to summarize, all you have to do to create your very own dynamic FAQ page in any WPGO theme is to:

  1. Create a new page.
  2. Select the FAQ page template
  3. Add your FAQ questions and answers.
  4. That’s it!

Click here to find out more information about the Minn theme.

About David Gwyer

Founder of WPGO themes and lead developer. I love creating themes that are intuitive and easy to use but deceptively powerful! I also enjoy tinkering around with plugins.

Leave a Reply

Your email address will not be published. Required fields are marked *