Button change on click

The right of the hero sections are buttons to change the video that’s displayed in the middle. How can I trigger the buttons to show like the purple one (the tag too) when clicked and like the other two when not clicked?

I got it to do it partially in styles, but it wouldn’t remain in the pressed state.

Hi there,

My initial approach would be to look at how the data is stored. Assuming the buttons on the right are all of a common datatype, populated via a repeating group, I’d make sure the video that needs to play from each button is linked to that button’s datatype. Create a workflow that changed the center group’s Thing to that button’s Thing. And make that click trigger a state which highlights that button (similar to how a tab design might be approached)

Ok, I’ve changed it to a repeating group which has gotten them to behave separately for changing the colors, but I can’t figure out how to get it to revert back when one of the other buttons is clicked instead of changing them all. And now I can’t get them to behave separately to show the different videos.

It’s essentially supposed to toggle between them, but the “toggle” workflow just makes it disappear.

Sadly, styles are not as versatile/customisable as we’d need them to be, and sometimes you have to rely on repeting conditionals on every element. However in this particular case you can probably achieve what you are trying to do with styles.

In the style’s conditional, use the ‘this element is not clickable’ and define how it looks in its clicked state
Then on the page-level, simply set that the elements as not clickable when they are selected. This will trigger the conditional, allowing you to not have to define the ‘clicked state’ styling everywhere on your app, you just need to create an ‘unclickable’ condition ie This Group's thing is the Selected thing

Using an ‘is clicked’ state is not the optimal solution if you only want to have one element to be selected at a time. It would be better to use ‘This group’s datasource is the selected datasource’, where the Selected Datasource is a custom state you are setting when an element is clicked. What is your datasource? Are you using option sets? Datathings? or just staticaly defined data?

For the text I’m using data types and fields.

Then use a custom state to save the currently selected database Thing, and add the conditional Parent Group's thing is custom state's thing .

Can you clarify this please? I’m somewhat new to Bubble and I’m not understanding what you mean.

Can you share a picture of the bubble editor of your page set-up? Are you using a repeating group?

Check this template: Modern SaaS Landing Page Template | Bubble

It should be as simple as some conditionals and keeping like an IsActive custom state that is changed with clicks.

OMG it took me forever to get it all fixed, but this template totally helped! Thank you so much, thought I was going to tear my hair out.