Accordion Snippet

This snippet creates Slider- or FAQ-styled accordions. Clicking on one of the accordions would open or close that section. Each row in the snippet will create one accordion. Creating three or more accordions within one snippet would automatically add an Expand All/Collapse All link at the top right. If you have more than seven accordions together, it is recommended that you try to split them into multiple categories.

Sliders used to be a very common practice 10+ years ago, when users were less comfortable going between pages. Users are much more savvy and more comfortable with scrolling now, especially on mobile devices.

Only use sliders when there may be several categories of information and the user most likely does not need all or even most of them, when a user only needs to consistently pick one or a few of the several options. For example, sliders are a great option for providing information about graduate degree types—thesis, dissertation, report, or coursework—and their requirements. If users frequently need all of the content, it should not be hidden! If you have a lot of content within a slider, consider making it a separate webpage.

The FAQ styling can be used anytime you are presenting frequently asked questions or other content that works well as numbered items with a statement/question followed by additional information.

1. Select the format for the accordions—Slider or FAQ.
   1. Sliders are simple rows that slide open a section below the title.
   2. The FAQ option creates numbered accordions that slide open when clicked on. Numbers are automatically formatted in the order they appear in the snippet.
   3. When using in an asset you must type in the correct option, “slider” or “faq”.
2. In the Title/Question field enter the title or question. This is what is displayed when the accordion is closed.
3. In the Content/Answer field to the right of the corresponding Title/Question enter the accompanying content, including text, images, video, snippets (except more accordions or class descriptions), or assets, that should be in the part that slides open. The Title/Question is not formatted as a heading, so be sure to use the correct heading order when including headings in the content/answer.
4. Accordions will automatically be assigned an ID that can be used for linking to. However, whenever you change the title/question field, that ID will change as well. To set an ID to use in a link that will not automatically be changed unless you manually edit it, enter an ID into the ID field. The ID must be unique on the page and can only be lower-case letters, numbers, and hyphens. To link to the ID you set use “slider-” and then the ID you set after the #. For example, if you set “hyperlink-language” as the ID, then you would link to #slider-hyperlink-language.” Note: For accessibility compliance, if you have multiple accordions with the same Title/Question you must assign them each unique IDs using this field.

If you need more than three accordions, press the Tab key to get more rows in the snippet.

Adding Accordions

To add a new accordion between existing accordions, right-click on the row above or below where you want the new one, go to Row, and select either Insert Row Before or Insert Row After. Enter your new content.

Reordering Accordions

Insert a new row where you want to move an accordion to by right-clicking on the row above or below where you want the new one, go to Row, and select either Insert Row Before or Insert Row After. Cut the content from the Title/Question cell that you want to move and paste it in the new space. Cut and paste the content from the Content/Answer cell you want to move and paste it in the new space. If the now empty row is between rows that have content, delete the row.