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.
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 | STYLE-5|
|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.
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...
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
- STYLE-1 -
- STYLE-2 -
- STYLE-3 -
- STYLE-4 -
- STYLE-5 -
- TRUE - The accordion titles and expand/collapse icons will be outlined by a thin border
- FALSE - Just the accordion titles and expand/collapse icons will be shown
- TRUE - All of the sections can be closed at once
- FALSE - One Accordion must be open at all times
- 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
- 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
Has Your Site Been Migrated?
The information on this page is for the old templates. New snippet information is available at the Funny Monkeys example site.