Streaming live at 10am (PST)

How to get accordion drop down to span whole grid width, and start at the beginning of the grid row

I have a page for performers with bios. This is built in a grid with photos and the corresponding dropdown in each grid cell.

What I want: when you click on an artist’s name, the accordion opens, taking up the full width of the whole grid, starting at the beginning of the row, and pushing down whatever content sits below the accordion.

What I have: I have 2 different almost solutions.

  1. In the grid, I can get the accordion to expand, pushing down the other content, and being the full width of the grid. However, the accordion starts wherever the dropdown toggle starts. so not at the start of the full row.

  2. If I pull the row of dropdowns out of the grid, and do some absolute positioning, I can get the dropdown list to start in the right spot… However none of the other requirements are met.

Hoping someone has an idea for how to tick all those boxes, because I am stuck :sweat_smile:

Thanks in advance for any help!

Here is my site Read-Only: Webflow - Performer Accordion

Hello Kaysha, I was trying to do the same concept. I am able to make the open dropdown field start at the beginning for each and span full width, but I am not able to make the open state pushing down the content below. Could you advise? I can share the link if needed. Thank you.