Creating an Accordion

Cascade 3.0 | Cascade 4.0

Requirements and Best Practices

  • Accordion item titles should be descriptive for quick scanning
  • Do not add headings inside of the accordion items. Please replace heading structures with bold text.

Appropriate Scenarios for Accordions

  • Frequently Asked Questions (FAQs)
  • Series of steps
  • Content that does not need to be viewed simultaneously

Cascade 3.0 Requirements

  • Must be an approved site maintainer of this page.
  • Must create the accordion as a widget before adding to the page.

Steps for Adding an Accordion in Cascade 3.0

  1. Click on Add Content.
  2. Click on the Widgets folder.
  3. Inside the Widgets folder, choose the Accordion option.
  4. A dialog box will open. Give your accordion a unique name and make sure the Placement Folder is the widgets folder.
  5. Start building your accordion by adding a title and text to each accordion item.
  6. Need more text boxes? Select the ‘+’ button to add more items.
  7. Once you finish creating all the items, Click on the 3 dots at the top right corner and select Check Content & Submit. Your accordion will be saved in ‘/assets/widgets’ folder. 
  8. Locate the webpage where your accordion will live and open the editing window.
  9. Make sure the page setting is set to complex. Select Widget Block as Content Type. Click on the Choose Block button and select your newly created accordion.
  10. Submit the page.

Cascade 4.0 Requirements 

  • Min: 4, Max: 15
  • Must be a Content Contributor
  • Must have access to the "Chico State" folder
  • All accordion item text must be encased in a paragraph tag.

Steps for Adding an Accordion in Cascade 4.0

Unlike the accordion steps in Cascade 3.0, you do not need to utilize the "Add Content" tab or the Assets folder. All accordion components will be added directly in the Edit window.

  1. Locate the page within the "Chico State" folder.
  2. Select the Edit button.
  3. Select the ‘+’ button to add a new group.
  4. Choose the accordion component in the Select Component drop-down menu.
  5. Optional: Add a descriptive heading and intro text to introduce the accordion on the page.
  6. Add item labels and item texts to each accordion item. You must complete four accordion items to meet the minimum requirement.
  7. All item text must be encased in a paragraph tag to ensure your font size and color match the site requirements.
    • Add a paragraph tag by putting your cursor before the first word of the item text. Press enter and remove the extra spacing. Your text box should have a "p" at the bottom row. 
      A blue square is around the paragraph tag. This tag is located at the bottom of accordion item text.
  8. Optional: Add a link to CTA link to the bottom of each accordion item OR embed a link directly into the text.
  9. Select "Preview Draft" to view your accordion on the page. Double-check that your accordion text shows the correct paragraph styling (navy blue and font size of 12).
  10. Select submit to submit your edits to Web Services for approval and publishing.

Troubleshooting

  • One of my accordion items is a different font color and size.
    Answer: Your item text does not have an attached paragraph tag. Open the edit window and locate the accordion item with the incorrect styling. Put your cursor before the first word of the item text and press enter. Remove the extra spacing. Your text box should now have a "p" at the bottom row. 
  • My accordion item title/ text is showing ${panel.label}
    Answer: The text above is an error message and is shown when the requirements of this component are not met. Please open your accordion item and check that all items have the required title and text. 
100% helpful - 1 review
Print Article