Facebook Pixel Accordion Snippets | Western Kentucky University Skip to main content

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.

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.

 

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.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 11/6/20