Custom Toggles Using Only Bubble Elements With Icons & Text

Using the new responsive engine, you’re able to create fully customizable toggles to include icons and text within them. Using conditional statements for formatting and one workflow per toggle, you can get creative with the look of your toggles:

Screenshot 2023-01-11 at 6.09.16 PM

Demo: Test Page Title Tag (bubbleapps.io)
Editor: Bsi-forum-app | Bubble Editor

Take a look at the elements in the editor. To get started, you need an outer group with a type of Yes/No, an inner group that will move set as Yes/No with the data source set as the parent, and one workflow. Use the conditional statements to format each item as you need it. Feel free to reach out with any questions.

7 Likes

Thank you so much for this. It saved me so much time. Do you know how I can use the go to page action when the toggle slides to the right?

The easiest way would be to add the go to page action after the display data in group step after you click the toggle and add a conditional to the go to page step that fires only when the toggle group Yes/No is Yes.

1 Like

I will try it. Thank you so much!

The toggle did not switch over unfortunately but it did go to page. Do you know another way to get the toggle control to switch over?

Can you show me a screenshot of your workflow? I really can’t explain without seeing what you have built.

This is what I have setup.

For the toggle workflow action to turn it on, do you have the display data action with the Yes/No is No? That will control the toggle, but the go to page action should stay how you have it. Also, does that Yes/No get saved somewhere to display the toggle state in the future?

I have everything but the yes/no being saved to the database.

So, the toggle is switching over, but if you are navigating to a new page after that. If the toggle is not changing a Yes/No in the database, once the user is redirected, the toggle will reset to whatever the default was. If you want the toggle to be shown in the true position, you need to save the Yes/No to a database record and then set the toggle’s value to the database record’s field. The toggle works purely on the frontend, so when you navigate away from the page, it won’t remember that the user turned it on.

Ok, thanks for that information. I will try it out.