Skip to content
Top Searches
Home » Training » Content Contributor Guide » Content Types » Accordion

Accordion Content in T4

The Accordion content type allows content to be hidden or revealed based on a user's actions. Accordion content is useful when displaying a large amount of text on a single page.

Accordion Content Example #1

The Accordion example below shows how the Heading*, Description*, Image, CTA Link Text, and CTA Internal/External Link fields display on a demonstration page.

Accordion content uses the Heading*, Description*, Image, CTA Link Text, and CTA Internal/External Link fields to display content on a page.

Accordion content uses the Heading*, Description*, Image, CTA Link Text, and CTA Internal/External Link fields to display content on a page.

Accordion Content Example #2

The Accordion example below shows how the Heading* and Description* fields can be used to display basic content on a demonstration page.

The Heading* and Description* fields of Accordion content can be used to display simple text on a page.

The Heading* and Description* fields of Accordion content can be used to display simple text on a page.

Accordion Content Basics

Explanation of Fields

Name*

  • Required field
  • Used in the backend to distinguish each piece of content
  • Make it descriptive so you can identify your content easily

Heading*

  • Required field
  • Text to display when the accordion is in a "closed" state
  • Keep this to one line, if possible!

Note: With this basic accordion content, the Heading* field is not a structural HTML heading tag (H1-H6). Therefore, if HTML headings are used within the body of an accordion, they must follow the proper heading structure within the context of the entire page. Review the web accessibility topic on headings for more information.

Description*

  • Required field
  • Body text of the accordion (flexible WYSIWYG field)

Image

  • Optional image (always floated to the right of content)
  • Recommended size: 200 x 130 (480 x 320 is also acceptable)
  • Target file size: <50 KB

CTA Link Text

  • Text for an optional Call To Action (CTA) button at the bottom of the accordion
  • Make sure the text is short but descriptive (avoid "Learn More")

Note: When adding text to this field, make sure you also fill out EITHER the CTA Internal Link or CTA External Link fields described below.

CTA Internal Link

  • Use "+ Add section link" to link the CTA to a page on our site
  • Use "+ Add content link" to link the CTA to a specific piece of content on a page on our site

CTA External Link

  • Add a URL to link the CTA to an external page (not on Fisher's website)
  • Start the URL with https:// or http://, as appropriate

Additional Fields

  • Keep the "Use default link text" checkbox checked