| Category | Value |
|---|---|
| May contain | Call to action, Image, Snippet, Text, Video |
| May be placed in | Content region, Region 2, Region 3, Container, Two column split |
| Field | Description |
|---|---|
| First panel is open | Checked or unchecked (default) for initial visibility of first panel. |
| Allow multiple panels to be open | Checked (default) or unchecked for panels to remain open. |
| Panels | Field into which the Accordion's panels will be added. |
| Title | Text for link to click to open/close the panel. |
| Anchor tag | Text name to identify the panel for deep links. |
| Content | Field into which the Accordion panel's components will be added. |
How to add an Accordion and Accordion Panel
Select Accordion from the Component type drop down list and click the Add new Component or Add another Component button.
Decide whether the first panel should already be open when the page loads and if so, Check the First panel is open checkbox.
Leave Allow multiple panels to be open Checked if panels should remain open as others are expanded. Uncheck Allow multiple panels to be open if expanding panels should collapse other panels.
Click on the Add Accordion panel button.
In the Title box, type the text that will be used for the link that is visible when the panel is collapsed. The link is clicked to expand or collapse the panel.
You can specify a unique name for the panel in the Anchor tag box to allow deep links to expand the panel.
Choose to add any number of Call to action, Image, Snippet, Text or Video components by clicking the corresponding Add button.
Things worth mentioning
When an Accordion panel is opened the page will automatically scroll to place the panel at the top of the window. This can be confusing when a lengthy panel is automatically being collapsed as well.
Using the Anchor tag field allows links to automatically open the specified Accordion panel. These deep links can occur on other pages as well as on the same page as the Accordion. Some URL fields in the CMS may not allow relative URLs with the Anchor tag in which case you will need to supply the full URL. (i.e. https://wmich.edu/web/accordion#anchor-tag-example instead of just web/accordion#anchor-tag-example)
The Anchor tag field will automatically convert the entered text to lowercase, convert some characters to hyphens and prevent other characters. The resulting text is what should be used when adding the Anchor tag to the end of a URL.
Examples
This is an example of an Accordion with two Accordion panels. The First panel is open checkbox was left unchecked. The Allow multiple panels to be open checkbox was left checked.
The next example is an Accordion with two Accordion panels. The First panel is open checkbox was checked. The Allow multiple panels to be open checkbox was unchecked.
The next example is an Accordion with two Accordion panels. The second Accordion panel has an Anchor tag of anchor-tag-example. Clicking on a link to /web/accordion#anchor-tag-example will automatically expand the panel.