Applying the Accordion Style

Accordions allow you to reduce the amount of text that displays on a page at a given time. Using the Styles of accordionHeader and accordionContent, you can hide some of your text until the accordion is opened.

IMPORTANT: The classes of accordionHeader and accordionContent can be applied only to text tags (or "div" tags, in the case of accordionContent). Accordion classes cannot be applied to anything else, including lists.

Edit Page Content

  1. Page Content: Use the WYSIWYG (text editing screen) or HTML (code screen) to add your body content.
  2. Highlight the text for the accordion Header.
  3. Click on the Styles drop down menu and select accordionHeader.
    screenshot of the Styles drop-down, highlighting accordionHeader style
  4. Highlight the text for the accordion Content (if you only have one paragraph of content).
  5. Click on the Styles drop down menu and select accordionContent.
    screenshot of the Styles drop-down, highlighting accordionContent style

NOTE: If you do have more than one paragraph in your accordionContent, you must use the HTML code to enclose the entire content section in a "div" tag. The opening div tag goes before the block of content. The closing div tag goes after block of content.

screenshot of an HTML edit screen, with the code for div class=accordionContent highlighted, showing how other block-level tages such as paragraph and list must be inside the styled div in order to appear in the accordion content.

Example

This is the first accordionHeader.

This is the content under the first accordionHeader.

This is the second accordionHeader.

This is the content under the second accordionHeader.
You can have more than one line/sentence within the content.

You can also have a list within the accordion content.

  • List Item 1
  • List Item 2

You can also nest accordions

Having accordions within accordions. Unfortunately, nested accordions are not automatically indented (as in this example), so you will have to manually indent each, using the Increase Indent button on the menu bar.

Finish Up:

  1. Click Submit to save your work.
  2. Publish (or send the request to publish).

Note that Accordions do not appear as accordions in the Editing or View tab in Cascade; you will have to publish the page to the test server in order to preview the accordion in action.