UXD - FAQ Accordion 'expand all' Styling

### 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

- [x] research and document best practice for "expand all" and "collapse all" functionality
- [x] design lead recommendation is to adopt the Delta example from the [NN/G article](https://www.nngroup.com/articles/accordions-on-desktop/)
- [x] create style instructions for how to best implement this functionality without reconfiguring the existing FAQ accordion
- [x] Complete Design Iterations section below
- [x] Document user interaction in Figma
- [x] Update the Hand Off section of this ticket with the final iteration of this design
- [x] Update design system as needed, with respect to our [atomic design building blocks](https://bradfrost.com/blog/post/atomic-web-design/)

---

### Design Iterations

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

Iteration 2

Link to notes: [comment](https://github.com/hackforla/311-data/issues/2068#issuecomment-3932490013)

**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](https://github.com/hackforla/311-data/issues/2068#issuecomment-3858717237)

**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](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=25714-19874&t=831ah42BZ4N3xLNE-4)

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.**_

https://github.com/user-attachments/assets/72ef5b0e-98ca-4d56-b908-c20ffac3eaeb

### Designer Resources

[NN Group: Accordions on Desktop: When and How to Use
](https://www.nngroup.com/articles/accordions-on-desktop/)

[FAQ Page](https://hackforla.github.io/311-data/?startDate=2024-01-24&endDate=2024-04-24#/faqs)

Iteration Dropdown Copy/Paste

```

Iteration X

Link to notes: `REPLACE WITH COMMENT URL`

**New prototype video - Iteration 2**

```

Instructions for Engineering Hand Off

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