Accordion interaction not working with a dynamic list

Design help Animations & Interactions
1

Working on a site and am stuck with an issue I cannot seem to find a solution to. The issue involves using Webflow’s CMS to populate staff member bios. I’ve set up a Collection to include all the dynamic content which works as expected. The bios are lengthy so I’ve set up the dynamic list items to include two sections: a bio header div that includes a photo, name and title — and a bio content div that contains: a bio paragraph, candid photo and a quote. The bio content style has a initial vertical size of zero (so it’s hidden) — and when the bio header is clicked it is supposed to display the bio content div using an interaction I’ve set up named “accordion” (where the vertical size is set to auto — it also includes a toggle to set it back to zero on the second click). This function works on a test section (at the top of the test page) where I’m not using the dynamic list – but it does not work for the dynamic list (the section at the bottom).

See the “meet the staff” page to view how I’ve set this up.

Here’s a screenshot of the page in question:

1302×1227 251 KB

Here is my public share link: Webflow - CSNC
(how to access public share link)

2

Hi @tercran it looks like your Bio Content divs have an initial appearance of display: none.

So what you can do is in your interaction where you’re expanding those elements. Set the Bio Content to display: block, at 0px height with 0ms for the easing in the first then, and then add another step where it expands to auto height for a smooth interaction.

3

Waldo,

Okay — looks like I mistakenly set the Bio Content Div to have the Staff Bio Closed interaction — just changed the interaction to none for that element and it works as it should now. No need to add the extra step as you’ve suggested. Thanks for you help — sometimes you need another set of eyes to find the error. Should I delete the forum post?

Thanks,
Terry ;->

www.bigwowdesign.com