- Engage C&M
- Brand
- Campus Communications
- Media & News
- Social
- Web
- Events Calendar
Organizing Text Content
Further organization and optimization of page content can make the user experience more enjoyable and helps the audience consume the content the way you intended.
Below you'll learn about creating tables and toggles, adding file downloads, list components for news feeds, and tags and filtering options.
Toggles
Toggles are a way to reduce the scroll length of a page by creating sections of text that can be opened or closed. Keep in mind that users cannot search (ctrl+F) for content within toggles unless they are expanded, so always consider if there is a better way to communicate the content before setting up toggles.
Toggle Item One
Toggle Item One Content
Toggle Item Two
Toggle Item Two Content
Best Practices
- Toggles are NOT Accessible. Do not place important information within a toggle.
- Use toggles for sections with content like related links or other resources
- Include a label for your toggle that explains to the user what content to expect within your toggles
- Do not use critical call-to-actions in toggle content as this content will be hidden and may not be easily accessed by the user
- Instead of using toggles for FAQ content, try to incorporate the relevant content into your website’s content
How to
1. To create a toggle, add two separate text components to your page (See text component for more info).
2. One text component is the toggle trigger. This is the heading you will click to open your toggle with. Apply Class "toggle item1".
3. The second text component is the toggle hidden content. Apply class toggleContent item1.
4. For multiple toggles repeat the first steps but increment the item number each time (e.g., toggle item2, toggleContent item2, toggle item3, toggleContent item3) and so forth.
Styles:
- toggle item1 - Toggle trigger
- toggleContent item1 - Toggle hidden content
