Accordion Callout


The Accordion is used to create a set of content panels, arranged vertically on a page, that can be opened and closed by site visitors. This presentation is an excellent way to include substantial content on a page without creating excessive scrolling for the site visitor.

Content Entry Field

Title

This field holds the title for the Accordion. The Title is not displayed on the public website. It is used to identify the Accordion within the CMS. Make sure to provide a clear, descriptive title as you will use this title when selecting the accordion to pull it into site pages. You may wish to preface the title with text to identify your department or office, for example Chem Eng – Term dates and deadlines.

title-field.png

Accordion Title

This field holds the title that appears at the top of the accordion content panel. When clicked or tapped, it is used to open the panel.

accordion-title-field.png

Accordion Heading

This field holds the heading that appears at the top of the content within the accordion panel itself. This heading is displayed in bold, italicized font treatment on the website.

accordion-heading-field.png

Copy

This field holds the primary content for the accordion content panel. The content can include multiple paragraphs, images, and links.

copy-field.png

Link

This set of fields holds the content for a formatted “Call to action” link placed at the bottom left of the accordion content panel. The Link has four fields:

link-field.png

1. Title

This is the text for the link.

Maximum length:  128 characters, including spaces between words and punctuation

2. URL

Make sure to use the full website address (make sure that it begins with http:// or https://).

Correct format: https://www.google.com
Incorrect format: www.google.com

Maximum length: 2048 characters

3. Open URL in a New Window

When checked, this opens the More Stories link (displayed in a “box” below the Masthead Stories) in a new browser window or tab (depending upon how the user’s browser is configured and the device on which the visitor is viewing the site).

4. Link “title” attribute

This attribute creates a “tooltip” that displays the text when a user places the mouse cursor on the link. It is also used for accessibility purposes to provide an additional description of the link. The title attribute maximum length is 128 characters, including spaces between words and punctuation.

Remove Button

This button, located below the Link fields, removes the accordion content panel. Note that the deletion is not permanent until the Save button at the bottom of the editing screen is clicked. If you remove an accordion content panel and then decide you want to retain it, simply navigate away from the editing screen (an easy way to do this is to click the “Content” link in the top navigation bar). The CMS will display a warning that by leaving any unsaved changes will be discarded. This is what you want, as it will un-do your deletion.

remove-link.png

Add Another Item Button

This button adds another accordion content panel to the group. The new panel is placed at the bottom of the group.

add-another-item.png

Changing the order of the panels

The ordering of the panels is changed by dragging them to new positions in the list. To drag a panel to a new position, left-click and hold the four-pointed arrow icon to the left of the panel’s content fields and then drag up or down. When the panel is in the desired position, release the mouse button and the panel will “pop” into the new position.

The top-to-bottom ordering in the list translates directly to the top-to-bottom ordering of the accordion panels on the page.

Accordion Functionality

The first (top) content panel item will always be open when the page is initially accessed by a web site visitor.

An accordion content panel cannot be closed directly. Another panel needs to be opened for another panel to be closed. This means there will be one panel open at all times.

Only the first panel can be set to be open when the page is initially accessed by a website visitor. If you wish the information in a panel to be visible when the page is initially accessed by a website visitor, move the panel into the first (top) position in the list.

How the Accordion displays on the website

accordion-display-on-website.png