▼
Streaming live at 10am (PST)

Show/hide content using a dynamic list

#1

my non CMS test works. but not the content generated via cms datalist.

Any ideas?

http://delmo-sports.webflow.io/events/wildwood-best-jersey-shore-triathlon#faq

https://preview.webflow.com/preview/delmo-sports?preview=ad3c7e94fcde386d530ce5c50660f3c5

Here is my public share link: LINK
(how to access public share link)

#2

Hi Jay,

OK Several things:

  1. as for what I see, you've affected the interaction to the link element that's around the + sign, and limit the interaction to SIBLINGS. But the link element isn't a sibling of your target... So to fix this, remove the interaction from this link and apply it to the parent element, the full title + link element, which is a sibling to the details block. Now the Interaction targets properly

  2. you're using Auto for the unfolding of your interaction, for the height of the targeted element. This won't work in most of the cases. You need to specify a fixed height. And that's an issue, yes because you don't know how high it will be. A workaround not so dirty is to set it to a value, then add a 0ms step just after setting it to auto. This way it will set itself to the length of the content. Fine tune it for the best effect.

There is a 3rd structural issue.

  1. your interaction is unique, that means the first click on it on the second element is considered the second click of the interaction. For you interaction to work as desired you need a one step only interaction. For that you'll need two trigger: the first trigger, onclick, will targt ALL the details blocks (so no limitation to sibling) and put them to height 0 and display none, in 0ms. Then the second trigger is basically the one you've already done, without the second click.basically, you have a 1 click interaction that starts to fold everything that could be unfolded, then unfolds only the one that's a sibling of your trigger.

Impressive site :slight_smile: There's a lot of work there, kudos.

#3

Vincent,

Thanks so much for the support on a Sunday morning!

I think I got it working. I'm attempting to have the "+" turn into an "x".

Item #2 doesn't seem to be an issue currently. Would this appear in other browsers?

Appreciate the compliment. My first deep CMS site. Goal is to allow to user to edit content x1 and update globally as needed. :slight_smile:

#4

user error... X to + icon toggle works. I punched in to rotate somewhere else.

It is a bit tricky to figure out the CMS data relationship. But once it's there. The connections and datalist functionality is pretty amazing!

#5

Item #2 is rarely an issue within the designer. But once published, boom, it kicks in. The reason is that most of the time, HTML doesn't know the height of an element it hasn't calculated yet. So when you set "Auto", you tell HTML to set its height at the height of its content... but HTML doesn't know, so nothing happens, or the wrong thing happens.

I know 2 and 3 are not cool, but that's just how HTML works. Nothing to do with Webflow. That's why we need Javascript for so many things, because HTML is pretty dumb to figure dimensions out. It does things blindly and doesn't even know when it goes wrong.

#6

I know the feeling :slight_smile: And even if you're very used to CMS and figure the relationships good to begin with, you're still in awe seeing everything showing up every time you link a piece of design to a collection property :slight_smile: Magical!