Western Kentucky University

OU Campus - Self-Help

Accordion Snippet

A JQuery Accordion is created with a table transformation.  When you are adding the Accordion Snippet on your page within the WYSIWYG you will only see a table.  Just fill in the table and it will "transform" to the accordion when you publish.  You can also see what it will look like when you publish it in the preview mode. 

You can see an example of the Accordion Snippet on our Funny Monkeys Example site.

If you would like to add a snippet to your page there are a couple of ways to do so.

Alternatively, you can turn any two column table into an accordion by adding the following in the table tag: class="wysinwyg-accordion".

When inserting the snippet via the WYSIWYG editor or the Snippet Gadget, you will see the following:


ACCORDION-ID Integer (IF YOU HAVE MORE THAN ONE ACCORDION ON YOUR PAGE, THIS NEEDS TO BE UNIQUE)
ACCORDION-ICONS STYLE-1 | STYLE-2 | STYLE-3 | STYLE-4
ACCORDION-COLLAPSIBLE TRUE | FALSE
ACCORDION-ACTIVE FALSE | # OF ACCORDION ROWS STARTING WITH 0 (must be integer)
ACCORDION-HEIGHTSTYLE AUTO | FILL | CONTENT
Title of First Accordion Body of First Accordion
Title of Second Accordion Body of Second Accordion

The first 5 rows are all optional settings for your Accordion. These settings are described below in the Accordion Settings section.

The last two rows (and any that you add) are where you add the content you would like to see in the accordion.  The first column is the title element of the accordion and appears in the clickable area of the Accordion.  The second column is the body element of the accordion and appears after clicking on the title.  If you would like to add more rows (more accordion sections) you can do so by right clicking anywhere in the table then going to Row and Insert Row Before or Insert Row After.

Accordion Settings

The accordion settings can be adjusted to control the appearance.  They are case sensitive.  You should only have one of the setting values per column.  For example, if you want to use STYLE-1 as your icons, it would look like so...

ACCORDION-ICONS STYLE-1

The available settings are as follows:

  • ACCORDION-ID (MUST BE the first row in the table and must be unique if using multiple Accordions per page, is not required when using one Accordion per page):
    • 0 - By default it will always be 0.
    • # - any integer
  • ACCORDION-ICONS:
    • STYLE-1Collapse 1  Collapse 1
    • STYLE-2  - Collapse 2  Collapse 2
    • STYLE-3Collapse 3  Collapse 3
    • STYLE-4Collapse 4  Collapse 4
  • ACCORDION-COLLAPSIBLE:
    • TRUE - All of the sections can be closed at once
    • FALSE - One Accordion must be open at all times
  • ACCORDION-ACTIVE:
    • FALSE - All panels will be collapsed when a page is loaded
    • 0 - # OF ACCORDION - This must be an integer.  The count of the accordions starts at 0.  So if you want your first accordion to be open when a page is loaded, you should put 0 here
  • ACCORDION-HEIGHTSTYLE:
    • AUTO - All panels will be set to the height of the tallest panel.
    • FILL - Expand to the available height based on the accordion's parent height
    • CONTENT - Each panel will be only as tall as it's content.

 

 Last Modified 5/17/14