Accordion Snippets

---

The accordion snippet organizes your content into a stack of cards that collapse. Each accordion item includes a title and icon indicating whether the card is collapsed or expanded. The Accordion Snippets are used often to organize information into groups. Accordions work well as an FAQ (frequently asked questions) using style 6 or 7 to add question icons.

 

Snippet Options

---

ACCORDION-ICONS

Controls the icons shown on the accordion tabs.

• STYLE-1   /
• STYLE-2   /
• STYLE-3   /
• STYLE-4   /
• STYLE-5   /
• STYLE-6   /
• STYLE-7   /

 

ACCORDION-ICONS-RIGHT

Whether or not the icons should appear on the right side, or left side of the accordion title.

• YES
• NO

 

ACCORDION-BACKGROUND

Controls the background color of the accordion title.

• RED
• WHITE
• GRAY

 

ACCORDION-MULTIPLE-OPEN

Specifies if more than one accordion is allowed to be opened at one time. Setting this to YES will allow multiple accordion tabs to be expanded at once; setting this to NO will only allow one accordion tab to be expanded at a time, expanding another accordion tab will cause the currently open tab to close.

• YES
• NO

 

 

Snippet Columns

---

Header of Accordion

The header or title text that appears at the top of the accordion item, even when collapsed, with the indicating icon. Clicking this opens and closes the accordion.

 Text Only, additional content will be removed.

 

Body of Accordion

The content that collapses in the accordion item. Other snippets and components can be added to this area.

 WYSIWYG content, nested snippets, components, and assets allowed.

 

 

Linking to an Accordion

To link directly to a specfic accordion, an anchor () tag can be added to any Header of Accordion cell. By doing so, #anchor-name can be appended to the end of the page URL to make the desired tab active when the page loads.

&nsbp; Please Note: While spaces can be used when creating a new anchor, they are not supported here. Any spaces will be converted to dashes ( - ) during page transformation.

 

 

Examples

---

Example 1

This example makes use of the STYLE-1 angle icons, aligned on the left side of the accordion title, and with a WHITE background.

 

 

 

Example 2

This example uses the STYLE-3 plus and minus circle icons, aligned on the left side of the accordion title, and with a GRAY background.

 

 

 

Example 3

This example uses the STYLE-5 plus and minus square icons, aligned on the right side of the accordion title, and with a RED background.

 

 

 

Example 4

This example demonstrates and FAQ using the STYLE-6 question and comment icons. Setting ACCORDION-MULTIPLE-OPEN to NO helps keep the focus on one question at a time.