Appearing / Disappearing Collection List to a Reactive Page

Hey Webflow Gurus,

Site context here: https://casscaldersmith.webflow.io/projects/projects

I’m building an architecture portfolio website for a client and he’s requested a feature for quickly showing a list of alphabetical project names next to the project grid.

See attached images:

He wants to add a toggle to get from State 1 to State 3, where the button pushes the grid over (scaled down) and an alphabetical list of the projects in the category appear for easy selection. I assume that list will be dynamically linked to the category collection, but the appear/disappear function sounds like some extra Javascript that’s beyond me. I’m wondering if this can be done simply in webflow or do I need to add a code hack to it.

State 2 is what I’m offering in the meantime, as its simple a dynamic dropdown list without any of the reactive page behaviors.

Thanks for all the help in advanced,
Jake