I want to display the IMAGE / Text only when three (3) buttons are clicked. In condition there is no option like “When click”.
Ex: Selected 3 buttons like grapes , apple , oranges then i want to display the text like thankyou etc…,
Welcome.
There are quite a number of ways to go about this and also it depends where these buttons are situated e.g. just on page in a regular group or in a list in a repeating group format.
I’ll use a very simple concept with just the elements on the page. One way would be to set a custom state on the page that can temporally store data on the page. So when someone clicks the button for ‘Apples’ to will temporally save that text value to the page, so we know the user has clicked that button (from a workflow action). Custom states are very useful and do not require touching the database.
Note: when the page is refreshed, these custom state values will be cleared from the page.
Here is a very basic example:
Link to the Editor:
So on the page containing these 3 buttons, we will create a state, which is of a text type and is a list:
For each button we will start a workflow:
So for when the button ‘Grapes’ is clicked, it will first look at the custom state on the page and see if there are any existing states set and then plus this item to the list. Otherwise if we just set the state to ‘grapes’ and we have existing custom text states already in the list, these values will be lost. So we need to reference the custom state list and use the modifier :plus item to add to the list, even if the list is currently empty. The defined value can be either static, like this example I’ve just typed ‘grapes’ or you can dynamically pull in a text value from the page or data types e.g. do a search for.
The other 3 buttons use the same principle workflow, the only difference is that the value ‘grapes’ will change to ‘apples’ and so on, depending the button clicked.
Then we simply add a text element below, add required content and make sure this is set to not visible on page load, so we can have a condition to show based on certain interactions with the page:
Here is the condition we apply, as we know there are 3 buttons and we cannot click the same button twice to make duplicates, as Bubble won’t allow duplicate entries within a custom state list:
Another way would be this, but rather long winded and not necessary as the result is the same:
Hope this helps.
Hi luke,
Very clear explanation, Thanks for spending your valuable time.
Your welcome. Glad it makes sense.
I have three buttons for those i need a active state when i clicked on each button, background color should be changed. Can you please help me
Sure, I think I understand right, in that you want an indicator to show the button has indeed been pressed.
Something as simple as this would work:
Again, as mentioned, there are other ways to implement this, depending the end result, to make things easier to maintain, but this example works just fine as a concept.
This topic was automatically closed after 70 days. New replies are no longer allowed.