Accordion Web Part

Overview

The Accordion web part provides a vertical stack of accessible, expandable/collapsible information panes, each designated by a heading containing a title, subtitle, and/or thumbnail image. One or more columns of content are displayed in the information pane.

Requirements

JavaScript must be enabled. Browser must meet the statewide minimum requirements.

Accessibility

This web part passes both WCAG 2.0 and Section 508 website standards. ARIA attributes, including aria-expanded, aria-controls, and aria-labeledby are employed to indicate how many panels exist, their current state, and which elements describe the information they contain. Upon interaction (click or touch), expansion or collapse will update the aria-expanded property value.

Note: If a panel is collapsed, only its heading can be accessed by keyboard. If expanded, all elements in the panel can be accessed by keyboard.

Suggested Prior Viewing

• Build a list
• Create list views
• Web parts overview

Video - Accordion Web Part

Other Web Part Articles

• Web parts overview
• Task Box web part
• News Room web part
• Map web part

Features and Functionality

• Fully accessible for screen readers and keyboard access
• List/Library-driven information panels
• View-based column administration to control order and visibility
• Heading Subtitle support (optional)
• Thumbnail image support (optional)
• Multiple column display support in information pane via HTML definition lists (optional)
• Ability to set the ID of each accordion panel
• Auto-open and auto-scroll to panel via query string hashtag

Tutorials

Create a Data Source

1. Create your list/library, adding any columns and content necessary.
2. Create and title a new Standard View which contains, orders, and sorts all columns you wish to display in the grid. Any edits made to this view will be immediately reflected in the accordion. Please note that not all options are supported at this time (e.g. Grouping).
3. Save and make note of the View’s title.
4. While on a page, insert the Accordion web part using the Insert menu in the Ribbon.
5. Open the web part’s properties and choose a data source via the Browse button and the Asset Picker menu.
6. Once the data source is selected, select the View you require.
7. Enable whichever features you require, and choose OK.

 

Add the Web Part

1. While on a page, insert the Accordion web part using the Insert menu in the Ribbon.
2. Open the web part’s properties, and choose a data source via the Browse button and the Asset Picker menu.
3. Once the data source is selected, select the View you require.
4. Enable whichever features you require, and choose OK. Please note that the Subheading feature works best with simpler types of columns (e.g. Single Line of Text, Number, etc). Complex field types such as Multiple Lines of Text are not supported at this time.

Set the ID of Panels (optional)

1. Visit the list/library you plan to use as the data source of your Accordion web part and add a new Single Line of Text column
2. Ensure that your new column is included in the View you are using or plan to use
3. While on a page, either add a new Accordion web part (see the above heading for directions) or locate the existing Accordion web part you wish to define IDs
4. Open the web part's properties and choose the your column from the ID (optional) dropdown list. If you do not see your column in the list, ensure that Steps 1 and 2 were followed
5. Choose OK

To open and scroll to a panel, add #yourID to the end of your URL (e.g. http://www.oregon.gov/myAgency/Pages/my-Page.aspx#coolStuff)

Note about IDs and anchor links

This feature was active when the accordion web part was developed.  At this time the feature cannot be relied on due to some changes outside of our control.  The feature is on the list for future work to restore reliability.  Status and progress is being tracked on the Roadmap Tracking article.  A new ticket requesting work on this is not necessary as it is already a recognized issue and in the plan.

Frameworks/Libraries Dependencies

jQuery

Bootstrap 3.x

Feedback

If you would like to suggest features, enhancements, or report a bug, please visit https://egovservicedesk.zendesk.com and open a new ticket.

Screenshots

Figure 1 - Web Part, expanded, with Thumbnail and Subtitle enabled, without multiple columns enabled

Figure 2 - Web Part Properties

Still have questions?  

You can:

• Search the Knowledge Base for what you are looking for: 

• You can find more articles in the V4.x Article Index
• You can submit a question to the Oregon E-Government Service Desk