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.
Body of First Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet.
Body of Second Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet.
Body of Third Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet.
Accordion Snippet | |
---|---|
Options | |
ACCORDION-ICONS | STYLE-1 |
ACCORDION-ICONS-RIGHT | NO |
ACCORDION-BACKGROUND | WHITE |
ACCORDION-MULTIPLE-OPEN | YES |
Accordions | |
Header of Accordion | Body of Accordion |
Header of First Accordion |
Body of First Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet. |
Header of Second Accordion |
Body of Second Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet. |
Header of Third Accordion |
Body of Third Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet. |
This is an example, do not copy this table into the WYSIWYG editor.
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.
Body of First Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet.
Body of Second Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet.
Body of Third Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet.
Accordion Snippet | |
---|---|
Options | |
ACCORDION-ICONS | STYLE-3 |
ACCORDION-ICONS-RIGHT | NO |
ACCORDION-BACKGROUND | GRAY |
ACCORDION-MULTIPLE-OPEN | YES |
Accordions | |
Header of Accordion | Body of Accordion |
Header of First Accordion |
Body of First Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet. |
Header of Second Accordion |
Body of Second Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet. |
Header of Third Accordion |
Body of Third Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet. |
This is an example, do not copy this table into the WYSIWYG editor.
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.
Body of First Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet.
Body of Second Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet.
Body of Third Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet.
Accordion Snippet | |
---|---|
Options | |
ACCORDION-ICONS | STYLE-5 |
ACCORDION-ICONS-RIGHT | YES |
ACCORDION-BACKGROUND | RED |
ACCORDION-MULTIPLE-OPEN | YES |
Accordions | |
Header of Accordion | Body of Accordion |
Header of First Accordion |
Body of First Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet. |
Header of Second Accordion |
Body of Second Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet. |
Header of Third Accordion |
Body of Third Accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat massa et ex accumsan molestie. Aenean feugiat maximus finibus. In interdum porttitor magna id imperdiet. |
This is an example, do not copy this table into the WYSIWYG editor.
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.
My name is Sir Robin of Camelot.
To seek the holy grail.
I don't know that.
Accordion Snippet | |
---|---|
Options | |
ACCORDION-ICONS | STYLE-6 |
ACCORDION-ICONS-RIGHT | NO |
ACCORDION-BACKGROUND | WHITE |
ACCORDION-MULTIPLE-OPEN | NO |
Accordions | |
Header of Accordion | Body of Accordion |
What... is your name? |
My name is Sir Robin of Camelot. |
What... is your quest? |
To seek the holy grail. |
What... is the capital of Assyria? |
I don't know that. |
This is an example, do not copy this table into the WYSIWYG editor.
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.