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

Accordion Snippets


The accordion snippet organizes your content into vertically stacked tabs. Each tab includes a title and can be expanded (opened) to reveal the content associated with that tab. The Accordion Snippet is used often to display FAQs as well as organize information into groups.

 

Available Settings

ACCORDION-ICONS
Controls the icons shown on the accordion tabs. (Options: 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 tab. (Options: YES, NO)

ACCORDION-BACKGROUND
Controls the background color of the accordion tab. (Options: 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. (Options: YES, NO)

 

Active 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.

 

 

Example #1

This example makes use of the STYLE-1 icons (  and  ), aligned on the left side of the accordion tab title, and WHITE background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-1
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #2

This example makes use of the STYLE-2 icons (  and  ), aligned on the left side of the accordion tab title, and WHITE background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-2
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #3

This example makes use of the STYLE-3 icons (  and  ), aligned on the left side of the accordion tab title, and WHITE background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-3
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #4

This example makes use of the STYLE-4 icons (  and  ), aligned on the left side of the accordion tab title, and WHITE background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-4
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #5

This example makes use of the STYLE-5 icons (  and  ), aligned on the left side of the accordion tab, and WHITE background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-5
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #6

This example makes use of the STYLE-6 icons. When using this style, a question mark icon (  ) is shown next to the accordion tab title, and a speech dialog icon (  ) is shown next to the accordion tab content. In this example, the icons are aligned on the left side of the accordion, and each tab has a WHITE background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-6
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #7

This example makes use of the STYLE-7 icons. When using this style, a question mark icon (  ) is shown next to the accordion tab title, and a speech dialog icon (  ) is shown next to the accordion tab content. In this example, the icons are aligned on the left side of the accordion, and each tab has a WHITE background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-7
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #8

This example makes use of the STYLE-1 icon  and  ), aligned on the right side of the accordion tab, and WHITE background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-1
ACCORDION-ICONS-RIGHT YES
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #9

This example makes use of the STYLE-6 icons. When using this style, a question mark icon (  ) is shown next to the accordion tab title, and a speech dialog icon (  ) is shown next to the accordion tab content. In this example, the icons next to the tab title are aligned on the right side of the accordion, and each tab has a WHITE background. Notice, the ACCORDION-ICONS-RIGHT setting does not effect the allignment of the icons next to tab content, which are only present with STYLE-6 and STYLE-7.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-6
ACCORDION-ICONS-RIGHT YES
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #10

This example makes use of the STYLE-1 icons (  and  ), aligned on the left side of the accordion tab title, and GRAY background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-1
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND GRAY
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #11

This example makes use of the STYLE-1 icons (  and  ), aligned on the left side of the accordion tab title, and RED background.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-1
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND RED
ACCORDION-MULTIPLE-OPEN YES
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


 

Example #12

This example makes use of the STYLE-1 icons (  and  ), aligned on the left side of the accordion tab title, and WHITE background. In this example, only one accordion tab is allowed to be expanded at one time; expanding another tab will cause the current open tab to be closed.

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Second Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Body of Third Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 

Accordion Snippet
ACCORDION-ICONS STYLE-1
ACCORDION-ICONS-RIGHT NO
ACCORDION-BACKGROUND WHITE
ACCORDION-MULTIPLE-OPEN NO
Header of Accordion Body of Accordion
Header of First Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Second Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

Header of Third Accordion

Body of First Accordion

Column one of the table is called "Header of Accordion". This is where you can edit the title of one of your tabs.

Column two of the table is called "Body of Accordion". This is where you can edit the content for the expanded view of a tab.

 


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

 Last Modified 2/21/18