Body 12 - Accordion


Description

This section is used to add accordions. Single accordions have a blue chevron arrow on the left. Sets of multiple accordions appear as panels with a chevron arrow to the right.

Fields and Character Limits

*required fields

Headline*

  • Character Limits: None.
  • Help Text: Enter a headline for your accordion(s). Hide the headline by selecting Display Headline > No in Style Options. See Headers for guidelines and best practices for headlines and sub-headlines.

Accordion Title*

  • Character Limits: None.
  • Help Text: Enter the accordion title. It should describe the contents of the accordion. Accordion titles should follow guidelines and best practices for Accordions and Micro-Content. See Accordions for more information, including guidelines and best practices.

Accordion Content*

  • Character Limits: None.
  • Help Text: Enter the accordion content. To avoid hiding information, the content in the accordion should be limited to what is described in the accordion title. See Accordions for more information, including guidelines and best practices.

Available Style Options

Display Headline*

  • Yes
  • No

Display Headline*

  • div
  • h3

Where Can You Use This Section?

The section is available in the following templates and content types:

Templates

  • Basic Content
  • Basic + Content
  • Contact

Content types

  • Content Page

Using on a cloneable Template

  1. Locate Body 12 - Accordion in the Body area
  2. Select Edit
  3. Select Edit for each Accordion Item
  4. Replace the placeholder text with the Accordion Title and Accordion Text
  5. To add additional accordions select Add Accordion Item and enter the content
    View ScreenshotTo add additional accordions select Add Accordion Item and enter the content
  6. Select the Style Options tab to set Display Headline and Markup options
    View ScreenshotSelect the Style Options tab to set Display Headline and Markup options
  7. Select Save at the bottom left of the page

Adding to a new Content Page

  1. In the Body area, select Add Body Section
  2. Select Body 12 - Accordion, select Add
    View ScreenshotSelect Body 12 - Accordion, select Add
  3. Enter the Accordion Title and Accordion Text
  4. To add additional accordions select Add Accordion Item and enter the content
    View ScreenshotTo add additional accordions select Add Accordion Item and enter the content
  5. Select the Style Options tab to set Display Headline and Markup options
    View ScreenshotSelect the Style Options tab to set Display Headline and Markup options
  6. Select either Save as Draft or Published with the drop-down menu
  7. Select Save at the bottom left of the form

Accessibility

  • Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.

Guidelines and Best Practices

  • Use accordions with caution since they hide the content they contain.
  • Use section when you have groups of information that would benefit from being collapsed.
  • Do not place important information in an accordion without using an accordion title that describes the content of the accordion.
  • To avoid hiding information, the content in a single accordion should be limited to what is described in the title only. See Accordions for more information, including guidelines and best practices.
  • Strongly recommend writing accordion titles that fit on a single line.

Removing a Section

To permanently remove a section from a page:

  1. Select the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
    View ScreenshotSelect the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
  2. Select Save at the bottom left of the form