Approach to building a dropdown accordion in a grid at different breakpoints?

So I’m trying to replicate this site for a client under a slightly different brand.
https://rise.boston

What seemed seemingly easy to replicate turned into a bit of a nightmare. My biggest fear with starting down one direction with an implementation is realizing there was an automated or just plain simple way to accomplish it. Maybe I did the best I could or there is a better solution?

My goal was to create a grid of projects that when you click on the project a full column width dropdown div appears below the row and the page scrolls to that section and you can collapse it and will go back to the top of the projects. The issue came up when I had to build responsive down from 3 columns to 1 columns.

Grid was able to successfully do this, but felt super messy and not easily replicable for the client if they had to add more. I wouldn’t even know where to start with CMS on something like this… Another issue I came across was that my sticky nav bar wouldn’t allow the section id links scroll to the viewable part, it would always be under the section so I had to build invisible div blocks with margin offsets to take into account.

I guess I’m wondering if my approach was the best or if I’m completely missing another approach.

https://rise-together-boston.webflow.io

https://preview.webflow.com/preview/rise-together-boston?utm_medium=preview_link&utm_source=designer&utm_content=rise-together-boston&preview=317483d8771e49c5a373a1a49c33dbdc&mode=preview

Why not build a modal approach to display the details of the project when clicked? When they close the modal they are at the same place they were.

Yes Jeff, that would have been the smart way, but the client wanted it to function like their other site.

Do you see an easy way of replicating what I did above, or did I approach it the best I could?

The possibilities with css grid is surprisingly endless, which is something I learned from this project. Being able to use manual/areas is not as limited as I thought. I just can’t imagine creating a CMS collection so that the client could recreate more of these without some custom things

Sorry, I don’t have time right now to dive into your project. Heading outside to try to clean up 8 acres of leaves. Maybe someone else can jump in to give you a hand.

1 Like