Unit Content Accordion
The Unit Content - Accordion component presents content in organized, expandable sections. The accordion displays a list of items in stacked rows, each with titles or buttons that can be clicked to toggle open and reveal related content. The accordion allows users to click on a specific row or header individually or expand all rows in the component.
On This Page
Example
Book Your Wellness Appointment Today MyHealthSpace Phone: 803-777-8283
These are direct costs that appear on the bill. Indirect costs like books and supplies, transportation and personal expenses should also be considered when planning your overall cost. Get a better estimate using our cost calculator.
Note: The university's Board of Trustees sets tuition costs in July for the following academic year. Refer to the Bursar's Office for a current listing of tuition and fees, including departmental charges.
Settings & Features
- User can control display of section content by clicking “+” or “–” or by clicking “Expand All” or “Collapse All” at the top of the accordion
- When activated, expandable section visually changes to indicate interactivity or clickability
- User can click anywhere in the title area or click the “+” sign to open a section, or click “Expand All” at the top of the accordion to open all sections
- User can click anywhere in opened section's title area or click the “-“ sign to collapse, or click “Collapse All” at the top of the accordion to close all open sections
- Content sections can be added, moved up or down, and deleted
- Use anchors to link to a specific, opened section of content
Working with Content
Good for:
- Short text
- Related content that can be split up or presented sequentially
- Frequently Asked Questions (FAQ)
- Reducing page length
Avoid if:
- Critical content should be immediately viewable
- Content requires headings
Best Practices
- To label accordions, use a Heading 3 to preserve correct heading order.
- Add groups of content items, each of which includes a label and related content:
- Accordion label should be short and concise for best readability. Accordion labels cannot be linking text.
- Accordion content supports paragraphs, inline links (including to other pages in the CMS), bullets and other inline styling.
- Use one accordion or more on content pages.
- Use accordions for detailed or secondary content. Information critical to the site user should be in the main content region; not hidden behind a click.
Usability & Guidelines
- Add only supported types of content to avoid breaking the component’s responsiveness and accessibility.
- Content labels cannot be linked.
- Adding images or other kinds of HTML-created content is not supported by the component.
Alternative Options
If content is critical, meant for different audiences, or the content within the accordion is not related, consider another type of component for better usability, accessibility and maintenance.
| Content Need | Recommended Component |
|---|---|
| Long-form content | Standard content page structure with proper heading hierarchy |