Accordion

Accordions allow content to be placed inside panels that can be expanded and collapsed.

CategoryValue
May contain Call to action, Image, Snippet, Text, Video
May be placed in Content region, Region 2, Region 3, Container, Two column split
FieldDescription
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

  1. Select Accordion from the Component type drop down list and click the Add new Component or Add another Component button.

  2. Decide whether the first panel should already be open when the page loads and if so, Check the First panel is open checkbox.

  3. 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.

  4. Click on the Add Accordion panel button.

  5. 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.

  6. You can specify a unique name for the panel in the Anchor tag box to allow deep links to expand the panel.

  7. 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.

  • Sample Accordion panel #1

    The content in this panel was initially collapsed and hidden because the First panel is open checkbox was left unchecked.

  • Sample Accordion panel #2

    When the content of this panel is expanded and visible, the first panel's content remains expanded and visible.  This is because 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.

  • Sample Accordion panel #3

    The content in this panel is initially expanded and visible because the First panel is open checkbox was checked.

  • Sample Accordion panel #4

    When the content of this panel is expanded and visible, the first panel's content is automatically collapsed and hidden.  This is because 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.