Easily add FAQ sections in Joomla articles with DJ-Tabs (inspired by Google)

Creating FAQ sections on your website does not need to be a complex task. You will learn from this article how to easily create and insert the FAQ sections into your articles. This tutorial was inspired by Google's solution to insert the FAQs into their help articles.

You have probably seen the Frequently Asked Questions (FAQ) sections on different websites. It's a popular solution to insert into the articles FAQs to answer the most common questions right where users may need answers, instead of forcing them to open a dedicated page with FAQ.

In this tutorial, you'll learn how to create something similar to Google's solution with DJ-Tabs - Joomla tabs and accordion extension.

In this article, I'd like to guide you on setting up the FAQ section you can insert into the articles or module positions anywhere on your Joomla website.

You will not need to use any code in articles to create the FAQs, and you will be able to re-use the once-created FAQ section in multiple places on the website. In addition to the easy process of creating of mentioned FAQs, they'll be dynamic, so you would not need to update the articles with FAQs when some new question arises or when you want to update the FAQ.

I'll be using DJ-Tabs Joomla tabs and accordions extension for this purpose.

Even though the DJ-Tabs is a tabs extension, you can use the included feature to hide the Tab header, and this way, the FAQs do not look like tabs.

The effect of this tutorial can be seen on our Demo page for DJ-Tabs.

Step #1

Create the Joomla article category named FAQ.

Go to Content -> Categories -> New to create new category. You can name it "FAQ" as in my example.

Step #2

Create the FAQ articles and assign them to a newly created category.

Step #3

Now, when we have created the FAQ articles we can move forward to the DJ-Tabs setup. 

Open the DJ-Tabs component and create the new group called "FAQ". 

Step #4

Create a new DJ-Tabs item in the newly created DJ-Tabs group. Set the item as an Article Category and assign the FAQ group we have just created and make the adjustments to leave just the title and text of the article.

Step #5

Now we need to create the module for DJ-Tabs and set the group (FAQ), choose a theme, and select the option to hide the tab in Tabs/Accordion Options tab not to display the tab name and create the desired effect.

Step #6

Now we can insert the newly create module inside the article to display our FAQ section.

The effect

Now, let's refresh the article with the newly created FAQ section to see the effect.

Optional adjustments

We can make some more adjustments to fit the FAQ section better into the article. In the above example, I have used the built-in "Simple" Theme that we can adjust. For this purpose, I'll copy the current theme and call it: "Simple-FAQ," and remove the borders and then assign the newly created theme to the module.

Additionally, I will match the font to the website font and set it to have all items closed, so users will need to click on them to reveal their content.

Summary

Check the documentation and tutorials for DJ-Tabs where you can learn about all the options it offers. If you dive deeper you can customize it, even more, I just wanted to explain the idea here, and provide a good starting point for your ideas. The articles you display in the FAQ section can have images and also other modules and plugins included. You can use the videos as well - just embed them into the articles.

Do you have any questions about this tutorial? Do you want us to create more like this? Maybe you have an idea about the tutorial we should make. Please let us know in the comments; thanks!