Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

POWER Sub Accordion Module

How to configure the Sub Accordion module for POWER Pro theme in HubSpot

icon-module-sub-accordions

SUB ACCORDION

Provide answers to questions to create a collapsible FAQ that can be combined with other modules to create a flexible section layout.

sub-accordion-example-section

Page Speed Impact

LOW

Very minimal impact to page load speed, the code for this module has been optimized to limit resources needed on page load.

MEDIUM

Can increase page load speed on mobile if used above the fold.

Additional impact on desktop and mobile if images are added to the rich-text editor without lazy loading and/or compression.

An image or video background also impacts page performance.

TIPS

Convert images to WebP where possible to meet criteria to serve images in next-gen format.

To reduce image file sizes without losing quality, use TinyPNG to compress your images (JPG, PNG, WebP).

Vector images (SVG) also help keep file sizes to a minimum and can be used for graphics like logos and icons.

FAQ

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

The Sec Accordion module is a pre-built section with all the details worked out for you (intro, title, description, layouts, etc.), all you have to do is set the section to full width, remove the top and bottom padding from the section, and you're all set!

The Sub Accordion module allows you to use the Accordion feature in combination with any other modules you'd like to build a custom section with however many rows and columns you need!

Can I change the color of the accordion?

Yes, in the module Style settings, you'll see "Custom Box Background Color" where you can change the color of the Accordion.

The color on hover is the Primary color from your theme settings, which can be changed under Theme Settings > Colors > POWER > Boxed Elements (note that this will change all modules using the box hover style, such as Image Boxes, Videos, Services, etc. that are rectangular shaped content elements).

Module Options

Accordion

This is where you will add the items that appear in the accordion.

accordion-add-item

When you hover over the preset item, you will see two icons appear for actions you can take: edit and clone.

Additionally, there is a + Add link above the first item where additional items can be added.

Tip: Depending on the complexity of the "answers" to your FAQ, it could be better to create the first item and then use the clone function to retain the formatting vs. using the +Add to create a set number of default items. If you have fairly simple Q&A without a lot of formatting, there is also a + Add link within the item settings to easily add additional items one after the other.

Accordion Item(s) > Title

This is where the Question goes if FAQ, otherwise, this is where the title/text goes that you want to display when the item is collapsed. This is a required field because it is used as the name of the item within the module, it can't be blank.

Accordion Item(s) > Description

This is where the Answer goes if FAQ, otherwise, this is where the text goes that you want to display when the item is expanded. The description uses a rich-text editor so you can format the answer as you'd like.

accordion-item-settings

Accordion Item(s) > Open by default

By default, all items will be collapsed. If you want the item (or items) to be expanded on page load, you can check this box.

accordion-item-open-by-default

Accordion Item(s) > Animation

You can also override the default animation settings at the item level.

accordion-item-animation-settings

Style >  Select Variant

This setting allows you to choose how you'd like the items in the accordion to look. The choices are Text Only, Boxed, Boxed Border, or Boxed Glassmorphism. 

accordion-style-select-variant

Check out the Configurations below to see how each of these variants can be styled.

Style > Color Scheme

Choice of Light or Dark.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

Style >  Custom Box Background Color

Additionally, you can select a custom color for the item background when collapsed to use in place of the theme default.

The background color of the item on hover can only be set at the global level in the Theme Settings > Color > POWER > Boxed Elements.

Animation

Checkbox to turn on/off Animate on Scroll. Turning off here will only apply to this module, to turn animation off globally refer to Theme Options for Animations.

Configurations

ACCORDION BOXED Style

sub-accordion-boxed-gradient

Style > Select Variant

Boxed

Section > Background

Gradient Background

ACCORDION BOXED BORDER STYLE

sub-accordion-boxed-border-dark

Style > Select Variant

Boxed Border

Style > Color Scheme

Dark

Section > Background

Color Background

ACCORDION TEXT LINE STYLE

sub-accordion-text-only

Style > Select Variant

Text Only

ACCORDION BOXED GLASSMORPHISM STYLE

sub-accordion-boxed-glassmorphism

Style > Select Variant

Boxed Glassmorphism

Section > Background

Image Background

Examples

DESIGN SOMETHING COOL WITH THIS POWER MODULE?

Share it with us!

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.