Show and hide element on click

Hello to the whole bubble community. I have a question, perhaps trivial, but I’m new and I’m trying to learn. I would like to create an effect similar to the video that I attach with bubble.2020-05-12 16-07-09
Specifically in my app. The user can access different galleries that I print on the page through a repeating group. Within these galleries we find the specific images of that gallery (also printed through an internal repeating group). How can I make the elements inside it visible when the name of the gallery is clicked? And at a second click are they hidden again?

You can do this by using conditionals and custom states, or conditions on workflow events.

Lets say you have a single icon element “arrow down” you can set a conditional on this element to change the icon displayed when a certain condition is met…maybe set a custom state to a text value you set as “up or down”…so when your custom state value is up ( that is the condition ) your icon displayed is arrow up…when your custom state value is down ( that is a second condition on same icon element ) your icon displayed is arrow down.

You will then in a workflow event set up a conditional event

When Icon is clicked - only when custom state value is up

Set state custom state value equals down

This will change which icon is displayed…then you can set another workflow action

When this icon is clicked - only when custom state value is down

Set state custom state value equals up

Then whatever larger element you want to show hide, set two conditions on that.

When custom state is up - this element is visible

When custom state is down- this element is not visible

There are other ways out there as well, there are workflow actions for show and hide as well as toggle.

Play around and find what works best for you.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.