Aivilo Web Accordion Module

A customizable accordion, great for FAQs or organizing large amounts of information.

Module features

Drag and drop module (can be used in landing pages, website pages, themes)
Unlimited accordion sections
Customize text colors, accordion background colors, font sizes, and width of accordion
Choose from several Font Awesome expand/collapse icons
Place an image, roman numerals, numbered list, a Font Aweseome icon, and more before each section title
Customize placement of accordion section bottom border

Section Title #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consequat nisl vel pretium lectus quam id. Blandit massa enim nec dui nunc mattis enim ut. Consequat interdum varius sit amet mattis vulputate enim nulla.

Section Title #2

Section Title #3

Section Title #1

Section Title #2

Section Title #3

Toggle Accordions

Toggle

Add Unique Module ID

Set a unique id for this module. If you are using this module in two sepearate instances on the same page, the unique ID allows different styles to be applied to each instance of the module.

Text Above Accordion Section

A rich text module allowing you to easily add and cusotmize text above the accordion sections.

Choose Accordion Type

Choose from a "Simple" or "Single Color Panel" accordion type. The "Simple" accordion type allows you to add a bottom border to each accordion section, but not a background color. The "Single Color Panel" accordion type allows you to add a background color to the accordion section title and expanded content sections, but not a bottom border.

Listing Optoins

Cusotmize the space before each accordion panel title. Choose from an image, number (including Greek, Roman, and Alpha numerals), a Font Awesoome icon, or simply "None".

Expand/Collapse Options

Customize the open and close accordion icons. This module uses Font Awesome icons and rotates the icons on the opening of the accordion section contents.

Color, Font Size, and Container Options

Customize the color of the module's text and Font Awesome icons. The text color can be overridden by specifying an alternate text color in the any of the module's rich text fields.

Customize the font size of the module's text and Font Awesome icons. The font size can be overridden by specifying an alternate font size in the any of the module's rich text fields.

Customize the container size of the module by setting a maximum container width under the "Container Options". This module is automatically mobile responsive with a mobile media query at an 800px breakpoint.