UXD - FAQ Accordion 'expand all' Styling

[rayneng]

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 2

Link to notes: comment

Static Userflow Overview (The red circles were added only to indicate the location of the text button.)

Components - Added hover states to the button

Iteration 1

Link to notes: comment

The screenshot shows only the default FAQ page (this part only shows the static image, the prototype and detail explanations are in Before and After Screenshot)

---

Hand Off Materials

Figma Section Name: Hand-Off Link

Before Screenshot

Expand / Collapse All button

The Expand All button shows by default

Once clicked, the Expand All button changes to “Collapse All.”

Overall Original FAQ Page

After Screenshot (Finalized)

New Expand All | Collapse All button

Components - Added hover states to the button

All Button States with Hovering Effect

Overall FAQ Page

Static User Flow (Updated)

Testable Prototype (Updated)

The extra space at the bottom is reserved to allow the Q&A content to expand properly in the prototype; otherwise, the last item (“How can I submit a service request?”) may not display correctly.

FAQ.Prototype.mov

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`

**New prototype video - Iteration 2**

<img width="971" height="420" alt="Image" src="https://github.com/user-attachments/assets/9e57529e-d6f7-4201-8c83-79da07519034" />

</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."