Accordion

An accordion pattern is a design technique used in websites to organize content into expandable and collapsible sections. 

The accordion pattern is similar to the bellows of an accordion, which can be expanded or compressed to fit the desired size. In a website context, the accordion pattern allows users to access and navigate through different sections of content without having to scroll through a long page.

The accordion pattern typically consists of a list of headings that represent different sections of content. When a user clicks on a heading, the corresponding content expands to reveal the details. Other headings collapse to preserve the page layout and make it easy to navigate through different sections.

Overall, the accordion pattern is a useful way to organize and present information on a website in a compact and user-friendly manner.

Accordion Settings

General Tab

In the General tab of the module, you can add, edit, and remove accordion items. To add new items to the accordion, click the Add Item button.

Each accordion item has a Title field and a Content field. The Title field corresponds to the heading of an accordion and the Content field corresponds to the collapsible section of content beneath the heading control.

Each accordion item also has the standard set of controls (icons) which perform the following actions:

• Reorder (drag & drop into the desired order)
• Duplicate
• Remove

Style Tab

In the Style tab of the module, there are limited options for "styling" the module.

• Accent Color: This is used for highlighting the current active item in the accordion. By selecting the accent color, any text color will automatically update in order to meet WCAG 2.1 Level AA guidelines for color contrast ratios.

Advanced Tab

In the Advanced tab of the module, there are all the usual settings for margins, visibility, and advanced HTML settings.