Streaming live at 10am (PST)

CSS List show info on click - reveal css list/item content on click/hover

Something similair is asked here, here, here, here and now here,

Almost figured it out, almost :slight_smile:

Created a list from CSS, in the same DIV (as a sibling) put some other content from list.
Used IX on click with simple: 1stClick:Hide(initial)/Show & 2ndClick:Hide on the div inside the collection div like suggested in threads linked above…

It works, but problem is, the info doesn’t close when something else is clicked. I tried cheating with a white background, but it seems that the list has some Z ranking. Items at the top are underneath items at the bottom of the list (if that makes sense)

So think I’m missing a trigger that hides all info when something else is clicked, is that possible?



image backup: https://i.imgur.com/Vt3UJEL.gif

It’s on this website, just scroll a bit down
https://raam-fa6132.webflow.io/

public share link
https://preview.webflow.com/preview/raam-fa6132?utm_medium=preview_link&utm_source=dashboard&utm_content=raam-fa6132&preview=114161407d6bffba10a8d44d71534cea&mode=preview

Thanks!

The answer to this is always the same, for an IX of that kind the strategy is the following:

On click, there’s a first step that is hiding all the content blocks by targetting the class with no limit. Then an action that’s showing the current block by targetting the class and limiting to children.

Thanks for your quick reply Vincent,

What i still can’t get my head around…
Do I need 2 different IX on click for the same div link?
Or is it possible to target both the entire class and just sibling with 2 different actions in 1 interaction?

because if I select 1 action and change the class target, it changes the target for all actions…

Feel like i’m completly missing the obvious here… :-S

Yes… but you got to outsmart the system :slight_smile:
Create 2 dummy divs, give one class to one, the other class to the other. Then when you setup your IX actions, use them. The IX engine will consider them as separate elements and you should be able to set them differently regarding the sibling limit. I’m almost 100% sure I have this working somewhere. And I think you can delete the dummy divs afterwards.

literally tried for hours, failed

found cool tutorial to do this on hover Top Five Interactions Designers Struggle to Create in Webflow - YouTube

but on click, I don’t get it -

:frowning:

if anyone has a tutorial on how to achieve this, please <3

Here is how to achieve it:

1 Like

Thanks so much Vincent!

For anyone trying to re-create this with an collection list…

  • The collection list Item is the parent/adiv that that holds the trigger
  • the child - sibling (combo class) is basically an empty div block placed on top of the header/menu item
  • a div as a column is added inside the collection item with position absolute, to create the info-block to the side
  • in this div/column another child-sibling div is added
  • this div can hold other collection list info