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

[tjarco]

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

Almost figured it out, almost

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!

[vincent (Vincent Bidaux)]

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.

[tjarco]

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

[vincent (Vincent Bidaux)]

@tjarco

Or is it possible to target both the entire class and just sibling with 2 different actions in 1 interaction?

Yes… but you got to outsmart the system
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.

[tjarco]

@vincent

you got to outsmart

literally tried for hours, failed

found cool tutorial to do this on hover https://www.youtube.com/watch?v=E-4xLVyGw4Q

but on click, I don’t get it -

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

[vincent (Vincent Bidaux)]

Here is how to achieve it:

https://dl.dropboxusercontent.com/s%2Fwjm40rcspkp6ukf%2Fscreencast%25202021-03-13%252013-39-05.mp4

[tjarco]

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

[yoboi (Frederik Lambaa-Bonde)]

Where is this video?? I’ve been struggling with this problem the past week, and can’t find a solution - please help me, Vincent!

[tjarco]

It’s all in targeting the extra Sibling Class

co-incidently I made a different project last week with something similar and had to back track how it works… Here is a simple example, where the button appears when the link is clicked and it hides all other buttons

As you can see, all buttons INSIDE the collection list have the extra Sibling class (red)

There is an extra button placed below without this sibling class (blue). This is just for reference and can be deleted later…

The animation basically has 3 steps

1. initial state - hide everything with the class Button
2. only show correct button (notice this one is linked to the red sibling class and targets only siblings)
3. hide all other buttons

You can easily use the extra button without the sibling class to create the animation steps 1 & 3, after this you can delete this extra button/object