How to Create a Collapsible FAQ in Gutenberg (Without Plugin)

by Akbar Padma

Last updated on December 4, 2023

A collapsible FAQ (frequently asked questions) is a helpful feature for any website that wants to provide summarizing and user-friendly answers to frequently asked questions. A collapsible FAQ allows you to hide and show the answers to the questions with a simple click or tap, saving space and improving readability. However, without the use of plugins, how can you create a collapsible FAQ in WordPress’ Gutenberg editor when WordPress lacks the necessary tools?

In this article, we will show you how to create a collapsible and expandable FAQ in Gutenberg without using any plugins. You can do this by using a combination of custom HTML, CSS, and JavaScript.

Steps to Create a Collapsible FAQ in Gutenberg (Without Plugin)

Step 1: Add the HTML Snippet

First, we will add the HTML snippet to your content (page or post).

Add the Custom HTML Block

Go to the Gutenberg WordPress editor to create new content (page or post) or select your existing content. Next, add the Custom HTML block to the content area, and then copy the HTML snippet below and paste it into the block field.

    <div class="faq-container">
      <h2 class="wp-block-heading has-text-align-center"><strong>FAQ</strong></h2>
      <div class="faq-item">
        <h3 class="faq-question">Question 1</h3>
        <div class="faq-answer">Answer 1</div>
      </div>
      <div class="faq-item">
        <h3 class="faq-question">Question 2</h3>
        <div class="faq-answer">Answer 2</div>
      </div>
      <div class="faq-item">
        <h3 class="faq-question">Question 3</h3>
        <div class="faq-answer">Answer 3</div>
      </div>
      
    </div>

Preview you page by clicking the Preview button to see your FAQ visually.

Edit the HTML Snippet

As you can see from the image above, the example HTML you’ve added sets three questions and answers to FAQ. Replace the text of questions and answers with your preferred text and add more Q&A items if you want to; we will show you how to do that.

Add the Q&A items

Copy the snippet below and paste it under the line of the last question and answer item (see the GIF below).

      <div class="faq-item">
        <h3 class="faq-question">Question 4</h3>
        <div class="faq-answer">Answer 4</div>
      </div>

Repeat that step if you want to add more Q&A items.

Input Your Questions and Answers

You can input your questions and answers to the HTML snippet by replacing the Q&A text (see the GIF below).

Repeat that step to other question and answer items.

Step 2: Add the JavaScript Snippet

As you can see from the image above, the questions and answers text has been successfully added to your FAQ page. But it still can’t be clicked or collapsed. Next, we will add the JavaScript snippet to make your FAQ clickable, collapsible, and expandable.

Add a Custom HTML block and place it under the previous block (HTML snippet). Afterward, copy the JavaScript below and paste it into the available field.

<!DOCTYPE html>
<html>
<head>
  <title>Collapsible FAQ</title>

  <script>
    jQuery(document).ready(function() {
      jQuery('.faq-question').click(function() {
        jQuery(this).next('.faq-answer').toggle();
      });
    });
  </script>
</head>
<body>
  </body>
</html>

Step 3: Add the Custom CSS

Finally, we will proceed to the final step of this article. As shown in the image above, the FAQ is successfully clicked and collapsible after the JavaScript snippet is added to your page. But it still appears cluttered. The addition of custom CSS will style the appearance of your FAQ.

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field. If you use a block theme, you may need to enable the theme customizer first. We have a separate post covering how to enable a theme customizer on a block theme you may want to read.

Here is the CSS snippet you can use.

.faq-container {
  margin: 20px;
}

.faq-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.faq-question {
  margin-bottom: 5px;
}

.faq-answer {
  display: none;
}


.faq-container {
  margin: 25px;
}

.faq-item {
  border: 1px solid #6c6363;
  padding: 10px;
  margin-bottom: 5px;
}

.faq-question {
  margin-bottom: 5px;
}

.faq-answer {
  display: none;
}

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

That’s it. Feel free to customize the CSS snippet to get your preferred FAQ appearance. To see the result, you can preview your page by clicking the Preview button. Don’t forget to save or publish your project if you want to.

The Bottom Line

This article demonstrates how to easily create a collapsible FAQ in the WordPress Gutenberg editor without the use of a third-party plugin. You have seen how to use a combination of custom HTML, JavaScript, and CSS to create a collapsible FAQ that can hide and show the answers to the questions with a simple click or tap. You have also seen how to style the collapsible FAQ according to your preferences.

However, we have to admit that this method has its drawbacks and limitations. WordPress plugins like Elementor and Divi give you much more flexibility and ease of use when creating FAQ pages. Therefore, we advise using those plugins if you are not happy with the outcome of your FAQ created using this method (without the plugin).

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.