PricingBlog

Can I make the tab buttons change color without duplicating the buttons?

  • mesmoiron-1287659767883501630

    mesmoiron

    1 year ago

    Hi,

    I recreated this tabbed example of W3Schools:
    https://www.w3schools.com/howto/howto_js_full_page_tabs.asp

    I duplicated the buttons in order to show or hide them based on the view. Can we do this dynamically with style variables? And maybe we can have a few more videos about using style variables. How to update them and use them with the styling tab. For me there's still some confusion.

    Translating javascript into an action formula, was a bridge too far. I got confused by the variables in the function. I used the above solution. Does it really matters if we duplicate things, if the logic is easier to understand? Lots of questions. But, I am happy that it works.
    1287659768143417365-Firefox_toddle_tabs_2024-09-23T06-13-30.333Z.png
    1287659768495996961-Screenshot_from_2024-09-23_08-15-10.png
  • tomthebigtree-1287671368879439874

    Tom Ireland

    1 year ago

    Can you provide an example of what you'd like to use a style variable for? For example, changing the colour of a tab, etc.?
  • mesmoiron-1287685378601517067

    mesmoiron

    1 year ago

    In the example, the active button displays the same color as the visible body div. I want the button (eg Home) to go from a gray state to a red color when the Home page view is active.

    Or, if I have a variable isActive; how can I change styles based on either a boolean or a string value of that variable and tie it to an event?

    i understand the logic, but not entirely how to translate that into a Toddle workflow.
  • plusmin-1287688691480789074

    Armand

    1 year ago

    You add a Class in the element whose style you wish to change. Then you use the Formula in that class to determine whether the class is active or not (so always a boolean).

    In the style tab of that element you can change the styling of that class.
  • mesmoiron-1287747423120392202

    mesmoiron

    1 year ago

    Thank you, I will check it as soon as I can login again
  • mesmoiron-1287752416154091612

    mesmoiron

    1 year ago

    I got it working. I also added pointer-events: none in the css box. Otherwise the tab button keeps flashing.
    🙌2