PricingBlog

Show / Hide Menu

  • tcg.store-1277298165313306665

    TCG.Store

    1 year ago

    Hi everyone,

    I'm trying to show a menu and hide menu when a user clicks this icon. In addition, want to switch the item to an x.

    This in JS is a 5 second change, but struggling to get this working in toddle. (I'm new to toddle and trying to learn how to do things)
    1277298165548191774-CleanShot_2024-08-25_at_11.58.472x.png
  • tcg.store-1277306069609087018

    TCG.Store

    1 year ago

    this works on click, but also want to hide another element. Let me see if i can experiment to get this working
    1277306069340655776-CleanShot_2024-08-25_at_12.37.372x.png
  • tcg.store-1277306589967155242

    TCG.Store

    1 year ago

    got the menu icon to hide and show close
    1277306589920890901-CleanShot_2024-08-25_at_12.39.462x.png
  • this is what i did for the menu icon to hide when clicked. Works well, need to work on the animation
    1277306716299591760-CleanShot_2024-08-25_at_12.40.002x.png
  • tomthebigtree-1277308049123709030

    Tom Ireland

    1 year ago

    That all looks good to me. Guessing you solved it based on your last couple of messages? Using Not is good for toggles because then you have to add less logic (depending on complexity of course).
    ❤️1
    🙏1
    3146e88a960b4af199e8c75190bcb1891
  • tcg.store-1277309197603835935

    TCG.Store

    1 year ago

    It's working really good @Tom Ireland just by experimenting a little, but only thing is that none of the transitions are working on click.

    Not sure how to triggle a transition on click. Any suggestions for triggering animations on click or transitions?
  • tomthebigtree-1277313184180736041

    Tom Ireland

    1 year ago

    Great to hear! Tbh, I've not really done much with animations. Maybe someone else in the toddle-hero crew might be able to help?
  • lucasg-1277322051132325989

    Lucas G

    1 year ago

    It depends on the set up
  • You’ll probably want to do it with classes
  • If using show/hide then you have to take an extra step to trigger the class
  • This will all be a lot easier once they implement the new CSS features that just made it into baseline
  • Like starting style
    ❤️1
  • tcg.store-1277331054620971068

    TCG.Store

    1 year ago

    Any examples on how to trigger classes in Toddle?
  • Tod-1277331056466591855

    Tod

    1 year ago

    Great energy @TCG.Store! Your continuous contribution to the toddle Community just made you advance to Community Level 5!
  • tcg.store-1277331148409802914

    TCG.Store

    1 year ago

    Excited for when the new CSS features come in
  • lucasg-1277333525112029306

    Lucas G

    1 year ago

    Classes can be added conditionally based on a variable (true/false)
    🙏1
  • lucasg-1277334004458323989

    Lucas G

    1 year ago

    So for example a class can change opacity or height, etc
  • And the element would have a transition on that property