Accordions

How To Create Accordions and Tabs

Accordion Content Types

1. Simple Accordion: Use when you don't have to introduce other content types. For example, an FAQ page.

2. Advanced Accordion: Use when you want to introduce another content type. Like a video or button for example.

Simple Accordion

This accordion does not allow other content types to be used. Only one simple accordion per page.

SOM Accordion Simple (only once at the beginning - tells browser that a simple accordion is starting)

SOM Accordion Simple Item

Etc.

Simple Accordion - Item 1

This is content. This link was created using the internal section link tool. It should be going to the About Us page.

This is an unordered list. The second bullet is a Beverage Permit PDF:

Item One is text
Beverage Permit
Item two is text

Simple Accordion - Item 2

This appears when you click Simple Accordion - Item 2

Advanced Accordion

The following is an outline of content types. They are color-coded to show the order.

SOM Advanced Module Start

SOM Tab/Accordion Item Start

Any Content Type(s) you want. Can be one or multiple.

SOM Tab/Accordion Item End

SOM Advanced Module End

Advanced Accordion - Item 1

This content was created using the HTML content type. This is a link to About Us using the section link tool.

Advanced Accordion - Item 2

SOM Button Content Type

This is sample content separating two Advanced Accordions. In this example, there is only one start and end module. The piece is between and end and a start

Tab After Text

This text is inside a tab that essentially is a new accordion