Hello everyone,
I’m trying to create a grid with hidden content that is shown on click.
I’d like the .Hidden-content div-block to be closed when the user clicks a ‘close’ button. But cannot get this working.
I can get the close interaction working when it’s attached to the second click of the initial trigger but that prevents me from having clickable content within the expanding content block…
What the hell am I doing wrong - I’m sure this should work, it’s driving me mad!
I’ve created a demo of the issue here:
https://preview.webflow.com/preview/test-bench-9a9ad1?utm_medium=preview_link&utm_source=designer&utm_content=test-bench-9a9ad1&preview=2afb01c7716e1d85a3ba6e3818a50ddc&workflow=preview
Hi there,
Here’s how to set up show/hide functionality with a separate close button:
-
Duplicate your existing trigger element and rename the copy to “Close” or similar
-
Set the Close button’s initial display setting to “None” in the Style panel
-
On your original trigger (show button):
- Add an interaction to show your content
- Add a second interaction to show the Close button
- Set both actions to occur at 0 seconds
-
On your Close button:
- Add an interaction to hide the content
- Add a second interaction to hide itself
- Set both actions to occur at 0 seconds
For smooth transitions, you can add animations to these interactions through the Interactions panel.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.