Sub Accordion

 

---

What is the Accordion Module used for?

The Accordion Module helps you organize information in expandable panels. It’s ideal for:

• Creating FAQs with collapsible answers

• Structuring feature comparisons or step-by-step guides

• Reducing scrolling on long pages

You can display multiple accordion items, each containing a title (question) and description (answer or content).

 

TABLE OF CONTENTS

Page Speed Impact
FAQ                                                                                                                                                                                Module Options

---

Page Speed Impact

How does this module affect page speed?

Low impact: The code is optimized to minimize loading resources.
Medium impact: If used above the fold on mobile, it may slightly increase load time.

Tips for better performance:

• Convert images to WebP format for next-gen performance.

• Use tools like TinyPNG

• Use SVGs for logos and icons—they’re lightweight and scalable.

---

 

FAQ

What's the difference between Sec Accordion and Sub Accordion modules?

The Sec Accordion module is a fully configured section and the Sub Accordion module is the basic accordion functionality to build custom sections.

 

Module Options

Where can I find global module settings?

You can adjust global styles and behaviors in:

• Theme Settings → Sub Modules

• Theme Settings → Theme Styles

 

How do I add accordion items?

Steps to Add Accordion Items

1. Open the Accordion Module in the page editor.

2. Hover over a preset item — you’ll see edit and clone icons.

3. Click + Add above the first item to create a new one.

Tip:
If you have multiple items with similar formatting, create one item and use Clone to keep consistent styling. For simpler Q&As, use the + Add link directly inside the item settings to add multiple entries quickly.

 

How do I configure accordion content?

Accordion Item → Title

• Enter the question (for FAQs) or collapsed title text.

• This field is required, as it identifies the item within the module.

Accordion Item → Description

• Add the answer (for FAQs) or expanded content.

• Uses a rich-text editor, allowing formatting such as bold text, links, and lists.

Accordion Item → Open by Default

• All items are collapsed by default.

• Check this box to expand specific items on page load.

Accordion Item → Animation

• Override global animation settings for specific items.

 

What are the style options for the Accordion Module?

Style → Select Variant

Choose how items appear visually:

• Text Only

• Boxed

• Boxed Border

• Boxed Glassmorphism

Style → Color Scheme

• Light: Light background, dark text

• Dark: Dark background, light text

Tip:
When using a custom background color, adjust the Color Scheme so that text remains visible and accessible.

Style → Custom Box Background Color

• Set a unique color for the collapsed item background.

• Note: Hover background colors are set globally in
  Theme Settings → Color → POWER → Boxed Elements.

 

How do I manage animations and visibility?

Animation Settings

• Enable or disable Animate on Scroll.

• Turning it off here only affects this module.

• To disable animations globally, go to Theme Options → Animations.

Visibility Settings

• Choose to hide the module on specific screen sizes.

• Refer to the Common Module Information section for responsive setup.