Topics Accordion

Requirements

• Component is only available as part of the all topics landing page template.

• Component will be dynamically populated via the topics taxonomy hierarchy. An admin will choose which bucket of items to include (e.g. disciplines). The title of each row will be a top level topic, and each directional link will be a second-level item. For example, the image above shows "Aerospace" as a the top-level topic and therefore the title of the accordion row. Each directional link is a second-level topic under Aerospace: Aerodynamics, Aircraft and Spacecraft, Astronomy, etc. Each of the second-level items will populate in rows of two items from left to right. Each accordion row will also include a "view all" button that will take a user to a filtered search results page with that top-level topic selected. For example, the "Aerospace" accordion item will include a button that takes a user to the search results page with the "Aerospace" topic selected.

• Any additional links in the accordions will be populated manually. For example, in the "Aerospace" row, an admin can insert a link for the Aerospace technical group.

• Component is dynamically populated, meaning there will be no limit to how many items can be added to this component.

• All rows of the accordion will be contracted on page load by default. Clicking on the plus icon will cause a row to expand, revealing the content of said row. Multiple rows may be open at a time. Clicking the minus icon on an expanded row will cause it to contract to its original state.

• When a user hovers over any of the links in this component, a hover state will be triggered to indicate clickable content. When a user clicks on any of the links in this component, they will be taken to the corresponding page.

• When hovering over the "?" icon on desktop (clicking on mobile), the user will get helper information

CMS Fields

https://styleguide.asce.org/section-components.html#asgref-components-topics-accordion