UXD - FAQ Accordion 'expand all' Styling

[ryanfchase]

Overview

Product and content teams have recommended including an "Expand All" and "Collapse All" functionality to the FAQ accordion to facilitate faster navigation and allow users to customize their viewing experience.
We need to improve the design for the Expand All button on the FAQ page so that dropdown controls are distinguishable from dropdown content.

More Info

Deliverable should bear in mind current design system and typography styling.

Action Items

• research and document best practice for "expand all" and "collapse all" functionality
  • design lead recommendation is to adopt the Delta example from the NN/G article
• create style instructions for how to best implement this functionality without reconfiguring the existing FAQ accordion
• Complete Design Iterations section below
• Document user interaction in Figma
• Update the Hand Off section of this ticket with the final iteration of this design
• Update design system as needed, with respect to our atomic design building blocks

---

Design Iterations

Please move ticket between In Progress and In Review to assist PM team

Iteration 1

Link to notes: REPLACE WITH COMMENT URL

REPLACE WITH SCREENSHOT UPLOAD

---

Hand Off Materials

Figma Section Name: REPLACE WITH SECTION NAME

Before Screenshot

REPLACE WITH SCREENSHOT UPLOAD

After Screenshot (Finalized)

REPLACE WITH SCREENSHOT UPLOAD

Designer Resources

NN Group: Accordions on Desktop: When and How to Use

FAQ Page

Iteration Dropdown Copy/Paste

<details><summary>Iteration X</summary>
<p>

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

</p>
</details> 

Instructions for Engineering Hand Off

To Start Engineering Hand Off...

1. Ensure all Hand Off Materials are filled in
2. Add the "ready for dev lead" label
3. Leave a comment saying "This ticket is ready for engineering hand off."