Accordions
Accordions hide and reveal additional content when selected.
Example
Example
Currently enrolled USF students, staff, faculty, emeriti faculty, and Fromm affiliates may use LINK+.
USF Law School students, faculty, and staff are not eligible to use LINK+.
LINK+ items are typically delivered within 2-3 business days of your request.
LINK+ items will be held for pickup for 10 days after receipt at the 1st floor library Circulation Desk. LINK+ items for home delivery will be mailed to the designated address on record. For patrons picking up items at other Pickup Elsewhere participating institutions, items will be held for 10 days at those libraries.
The loan period for LINK+ items is 21 days. You may have up to 15 LINK+ items and outstanding requests at one time.
Usage
- Platforms — Accordions can be used in LibGuides LibAnswers LibCal
- Permission level — Accordions can be used by Regular and Admin users
- Framework — Accordions are built on the Bootstrap 3 Collapse component
Content Guidelines
- Brevity — Keep accordion content brief and focused
- Clarity — Accordion titles and text should be descriptive and meaningful
Best Practices
- Placement — Use accordions in the main content area of webpages; do not use accordions in the side navigation area of webpages
- Groups — Use accordions in groups of two or more; do not use a single accordion
- Formatted text — Use bullets, bold, italics in body panels; do not use headings in body panels
- Responsive layout — Accordion panels are stacked vertically regardless of screen size
Accessibility
- ARIA roles — ARIA roles establish the semantic meaning of an element when it does not have a default HTML element; this ensures the accordions are accessible to assistive technologies
role="tab"is set on the headers or links that control the opening/closingrole="tabpanel"is set on each collapsible content section
- ARIA states — ARIA states describe the current condition of the elements that make up accordions
aria-expanded="true/false"indicates whether a section is open or closedaria-controlslinks the header to the content it controls
- Keyboard navigation — Accordions are navigable by keyboards and have clearly defined focus indicators