JoomFAQs - Accordion Module Setup

The JoomFAQs module (mod_joomfaqs) lets you display FAQ questions and answers as an interactive accordion widget anywhere on your Joomla site. Visitors click a question to expand its answer, and the previously open answer collapses automatically. The module supports instant search with text highlighting, 14 visual styles, FAQ Schema markup for SEO, and full control over colors, icons, and typography.

You can create as many module instances as you need -- for example, one per FAQ category -- and place them in any module position your template provides.

---

Table of Contents

1. Creating a New Module Instance
2. Configuration Reference: Basic Tab
3. Configuration Reference: Search Tab
4. Configuration Reference: Style Tab
5. Configuration Reference: SEO Tab
6. Configuration Reference: Advanced Tab
7. Module Positioning Guidance
8. Using Multiple Module Instances
9. Example Configurations
10. Related Guides

---

Creating a New Module Instance

Follow these steps to add a JoomFAQs accordion to your site.

1. In the Joomla administrator, navigate to Extensions > Modules.
2. Click the New button in the toolbar.
3. From the module type list, select JoomFAQS - Questions.
4. Give the module a descriptive Title (for example, "General FAQ" or "Shipping Questions"). You can choose to show or hide this title on the frontend.
5. Set the Position to a module position provided by your template (see Module Positioning Guidance below for recommendations).
6. Under the Menu Assignment tab, choose which pages should display this module. Select On all pages for site-wide display, or pick specific menu items.
7. Configure the module options across the tabs described in the sections below.
8. Set the Status to Published.
9. Click Save & Close.

Your FAQ accordion will now appear on the selected pages in the chosen position.

---

Configuration Reference: Basic Tab

The Basic tab controls which questions are displayed, how many appear, and in what order.

Option	Description	Values	Default
Layout	Selects the module template used for rendering. The "Default" layout renders a Bootstrap 5 accordion. Template overrides appear here automatically.	Default (or any template override)	Default
Category	Restricts the module to questions from a single FAQ category. Choose "All Categories" to show questions from every category.	All Categories, or any published JoomFAQs category	All Categories
Order By	Determines the sort order of the displayed questions.	Question ASC, Question DESC, Question Creation Date ASC, Question Creation Date DESC, Ordering ASC, Ordering DESC	Question Creation Date ASC
List Limit	Maximum number of questions to display in the accordion. Enter 0 for unlimited (not recommended for large FAQ sets).	Any positive integer	5

Tips:

• If you only want a small "Top 5 Questions" widget in a sidebar, set List Limit to 5 and Order By to a sort order that surfaces your most important items (for example, "Ordering ASC" if you have manually ordered your questions in the admin).
• If you want a full FAQ page section showing every question in a category, set List Limit to a high number like 100 and choose a specific Category.

---

Configuration Reference: Search Tab

The Search tab configures the instant search bar that appears above the accordion. When a visitor types in the search field, questions that do not match are hidden in real-time and matching text is highlighted.

Option	Description	Values	Default
Enable Search	Show or hide the search input field above the accordion.	Yes / No	Yes
Search Placeholder	Custom placeholder text displayed inside the search field. Leave empty to use the default language string ("Search FAQs...").	Any text	(empty -- uses "Search FAQs...")
Case Sensitive	When enabled, search matching distinguishes between uppercase and lowercase letters. Most sites should leave this disabled.	Yes / No	No
Ignore Diacritics	When enabled, accented characters are treated as their base letter during search (for example, "cafe" matches "café"). Useful for multilingual sites.	Yes / No	Yes
Enable Wildcards	When enabled, visitors can use * (any characters) and ? (single character) wildcards in search terms.	Yes / No	No
Highlight CSS Class	The CSS class name applied to the HTML element that wraps highlighted search matches. Change this if you need to target highlights with custom CSS.	Any valid CSS class name	highlight
Highlight HTML Element	The HTML tag used to wrap highlighted search matches. mark is the semantic default; span, strong, or em are alternatives.	mark, span, strong, em	mark
Search Accuracy	Controls how strictly the search matches text. Partially matches if the search term appears anywhere inside a word. Complementary matches words that begin with the search term. Exactly requires a full word match.	Partially, Complementary, Exactly	Partially
Highlight Color	Background color applied to highlighted search matches. Uses a color picker.	Any hex color	#ffff00 (yellow)
Show Count Message	When enabled, displays a brief message below the search field showing how many FAQs matched the search term.	Yes / No	Yes

Tips:

• For most sites, the defaults work well. The "Partially" accuracy mode with diacritics ignored provides the most forgiving search experience.
• If your audience is technical and expects precise results, switch Search Accuracy to "Exactly."
• The highlight color can be adjusted to match your site's brand. A soft pastel (for example, #fff3cd) is often easier on the eyes than bright yellow.

---

Configuration Reference: Style Tab

The Style tab controls the visual appearance of the accordion. JoomFAQs ships with 13 predefined styles plus a fully customizable "Custom" option.

Accordion Style

Option	Description	Values	Default
Accordion Style	Select a predefined visual theme or choose "Custom" to build your own. See the style descriptions below.	Default Bootstrap, Minimal, Modern, Corporate, Gradient, Material Design, Glass, Glassmorphism, Neumorphism, Dark, Outline, Shadow, Flat, Custom	Default Bootstrap

Predefined style descriptions:

Style	Look and Feel
Default Bootstrap	Standard Bootstrap 5 accordion styling. No extra CSS is generated.
Minimal	Clean, borderless design with transparent backgrounds. Subtle bottom dividers between items.
Modern	Rounded cards with light shadows. The active question header receives a colored background.
Corporate	Structured look with a bordered container. Professional and restrained.
Gradient	Headers use a gradient background (two-tone). The active item shifts to a complementary gradient.
Material Design	Inspired by Google Material Design. Cards with elevation shadows and uppercase question text.
Glass	Semi-transparent panels with a backdrop blur effect. Works well over colorful backgrounds or images.
Glassmorphism	Advanced frosted-glass effect with saturated blur and subtle gradient overlays.
Neumorphism	Soft, extruded appearance with inner and outer shadows on a tinted background.
Dark	Dark background panels with light text. Ideal for dark-themed sites.
Outline	Bordered items on a transparent background. The active item's border color changes.
Shadow	White cards with prominent drop shadows that lift slightly on hover.
Flat	No borders or shadows. A colored left border accent marks the active item.
Custom	Unlocks full control over every visual property (see Custom Style Options below).

Options Available for All Non-Default Styles

These options appear when any style other than "Default Bootstrap" is selected.

Option	Description	Values	Default
Primary Color	Overrides the primary/accent color used by the selected style (for example, active header background). Leave empty to use the style's built-in color.	Any hex color	(style-specific)
Secondary Color	Overrides the secondary/background color used by the selected style. Leave empty to use the style's built-in color.	Any hex color	(style-specific)
Enable Animation	Enables smooth CSS transitions for expand/collapse and icon rotation.	Yes / No	Yes
Expand Icon	The icon displayed on collapsed (closed) accordion items. Uses the Joomla icon picker (Font Awesome).	Any Font Awesome icon class	fas fa-plus
Collapse Icon	The icon displayed on expanded (open) accordion items.	Any Font Awesome icon class	fas fa-minus
Icon Position	Places the expand/collapse icon on the left or right side of the question text.	Left, Right	Right
Hover Effect	Adds a subtle shine animation when the user hovers over a question header.	Yes / No	Yes

Custom Style Options

These options appear only when "Custom" is selected as the accordion style. They give you pixel-level control.

Option	Description	Values	Default
Border Width	Width of the accordion container and item divider borders, in pixels.	0 -- 10	1
Border Color	Color of borders around the accordion.	Any hex color	#dee2e6
Border Radius	Corner rounding in pixels. Use 0 for sharp corners or higher values for a pill shape.	0 -- 50	4
Header Padding	CSS padding applied to question headers. Use standard CSS shorthand (for example, 1rem 1.25rem).	Any valid CSS padding value	1rem 1.25rem
Body Padding	CSS padding applied to the answer body area.	Any valid CSS padding value	1rem 1.25rem
Shadow Effect	Adds a box shadow around the accordion container.	None, Small, Medium, Large	None
Title Font Size	Font size for question text, in pixels. Leave empty to inherit from your template.	Any number (pixels)	(empty -- inherits)
Text Font Size	Font size for answer text, in pixels. Leave empty to inherit from your template.	Any number (pixels)	(empty -- inherits)
Text Color	Color of the answer body text.	Any hex color	(empty -- inherits)
Text Background Color	Background color of the answer body area.	Any hex color	(empty -- inherits)
Title Color	Color of the question header text.	Any hex color	(empty -- inherits)
Title Background Color	Background color of the question header.	Any hex color	(empty -- inherits)

Global Style Options (Always Visible)

These options appear regardless of which accordion style is selected.

Option	Description	Values	Default
Question Icon	The icon displayed next to each question title inside the accordion. Can be overridden per category in the component settings.	Any Font Awesome icon class	fas fa-angle-down
Custom CSS	A code editor field where you can enter arbitrary CSS rules. These are injected into the page as an inline <style> block. Use this for fine-tuning that the built-in options do not cover.	Any valid CSS	(empty)

---

Configuration Reference: SEO Tab

The SEO tab controls FAQ Schema structured data output for the module.

Option	Description	Values	Default
Enable FAQ Schema	Outputs Schema.org FAQPage structured data (JSON-LD) for the questions displayed by this module. This helps search engines display your FAQs as rich results. Note: This setting works in conjunction with the component-level FAQ Schema setting -- both must be enabled for schema output to appear.	Yes / No	Yes

Tips:

• If you have multiple module instances on the same page, only enable FAQ Schema on one of them to avoid duplicate structured data.
• Use Google's Rich Results Test tool to verify your FAQ schema is rendering correctly after enabling this option.

---

Configuration Reference: Advanced Tab

The Advanced tab contains standard Joomla module options.

Option	Description	Values	Default
Module Class Suffix	A CSS class (or classes) appended to the module's outer container. Useful for targeting this specific module instance with custom CSS in your template. Separate multiple classes with spaces.	Any text	(empty)
Caching	Controls whether module output is cached. "Use Global" follows the site-wide cache setting. "No caching" ensures the module always renders fresh content.	Use Global, No caching	Use Global
Cache Time	How long (in seconds) the module output is cached before being regenerated. Only applies when caching is active.	Any positive integer (seconds)	900 (15 minutes)

Tips:

• If your FAQs change frequently (for example, you publish new questions daily), consider setting Caching to "No caching" or reducing the Cache Time.
• If your FAQs are relatively static, leave caching enabled for better page load performance.

---

Module Positioning Guidance

Where you place the module depends on how you want visitors to interact with your FAQs. Here are common approaches:

Sidebar Position (e.g., sidebar-right, aside, right)

Best for a compact "quick help" widget alongside other content. Use a lower List Limit (3--5 questions) so the accordion does not overwhelm the sidebar. Choose a clean style like Minimal or Flat that works well in narrow spaces.

Main Content Area (e.g., content-bottom, main-bottom, below-content)

Best for a full FAQ section at the bottom of a page. You can show more questions (10--20+) and use a visually richer style like Modern, Shadow, or Gradient. Enable search so visitors can quickly find the answer they need.

Full-Width Positions (e.g., banner, breadcrumb, feature)

If your template offers full-width module positions, these work well for dedicated FAQ landing pages. Pair with a large List Limit and one of the more visual styles like Glassmorphism or Neumorphism for maximum impact.

Custom Module Position in Articles

You can embed the module inside an article using Joomla's {loadmodule} or {loadmoduleid} syntax:

{loadmoduleid 123}

Replace 123 with your module's ID (visible in the Modules list). This is useful for placing FAQs inline within a specific article or landing page.

---

Using Multiple Module Instances

A common pattern is to create one module instance per FAQ category. For example:

Module Title	Category	Position	Pages
General Questions	General	content-bottom	Homepage
Shipping FAQ	Shipping	content-bottom	Shipping Policy page
Returns FAQ	Returns	content-bottom	Returns page
Quick Help	General	sidebar-right	All pages

Steps to set up multiple instances:

1. Create your first module instance following the steps in Creating a New Module Instance.
2. Save it.
3. In the Modules list, select the module you just created by clicking its checkbox.
4. Click Batch in the toolbar, then choose Copy as the batch action and click Process.
5. Open the copy and change its Title, Category, Position, and Menu Assignment as needed.
6. Repeat for each additional FAQ category.

Each module instance maintains its own independent settings for style, search, limit, and SEO -- so you can have a minimal, search-disabled sidebar widget on every page and a full-featured, styled FAQ section on your help page.

Important note on FAQ Schema: If multiple module instances appear on the same page, enable FAQ Schema on only one of them to prevent duplicate structured data in your page source.

---

Example Configurations

Example 1: Sidebar "Quick Help" Widget

A compact FAQ widget in the sidebar showing the 5 most recently created general questions.

Setting	Value
Title	Quick Help
Show Title	Yes
Position	sidebar-right
Category	General
Order By	Question Creation Date DESC
List Limit	5
Enable Search	No
Accordion Style	Minimal
Enable FAQ Schema	No
Menu Assignment	On all pages

This configuration keeps the widget lightweight. Search is disabled to save space in the sidebar, and FAQ Schema is turned off since the main FAQ page handles structured data.

Example 2: Full-Width FAQ Page Section

A comprehensive FAQ section placed in the main content area of a dedicated help page, with search and rich styling.

Setting	Value
Title	Frequently Asked Questions
Show Title	Yes
Position	content-bottom
Category	All Categories
Order By	Ordering ASC
List Limit	50
Enable Search	Yes
Search Placeholder	Type your question here...
Search Accuracy	Partially
Ignore Diacritics	Yes
Show Count Message	Yes
Highlight Color	#fff3cd
Accordion Style	Modern
Primary Color	(match your brand color)
Enable Animation	Yes
Icon Position	Right
Enable FAQ Schema	Yes
Menu Assignment	Only on the "Help" or "FAQ" menu item

This gives visitors a polished, searchable FAQ experience with Schema.org structured data for search engine rich results.

Example 3: Dark-Themed Product FAQ

A product-specific FAQ styled for a dark-themed page.

Setting	Value
Title	Product FAQ
Show Title	Hide
Position	content-bottom
Category	Product Questions
Order By	Ordering ASC
List Limit	15
Enable Search	Yes
Accordion Style	Dark
Primary Color	#6366f1
Secondary Color	#1e1e2e
Expand Icon	fas fa-chevron-down
Collapse Icon	fas fa-chevron-up
Enable FAQ Schema	Yes
Menu Assignment	Only on product pages

Example 4: Fully Custom Branded Accordion

Complete control over every visual detail using the Custom style.

Setting	Value
Title	Help Center
Accordion Style	Custom
Border Width	0
Border Radius	12
Shadow Effect	Medium
Header Padding	1.25rem 1.5rem
Body Padding	1.5rem
Title Color	#1a1a2e
Title Background Color	#f0f4f8
Text Color	#4a5568
Text Background Color	#ffffff
Title Font Size	16
Text Font Size	14
Question Icon	fas fa-circle-question
Custom CSS	.joomfaqs-module .accordion-button:not(.collapsed) { background: #3b82f6 !important; color: #fff !important; }