Forum Academy Marketplace Showcase Pricing Features

Underline button

Hello

I want to achieve two things with the simple buttons here:

  1. When Button 1 is clicked, Button 1 is underlined AND it keeps the underline AND Button 2 is not underlined anymore
  2. When Button 2 is clicked, Button 2 is underlined AND it keeps the underline AND Button 1 is not underlined anymore

does anyone have any idea how to solve this?

thanks

Set a custom state when either button is clicked, and use conditions on the buttons, based on the custom state, to show the underline for whichever is currently selected.

For example:

Have a custom state (it can be on the page) called selected button of type ‘text’ or ‘Number’

Have conditionals on Button 1 to show the bottom border (to act as an underline) whenever the pages selected button value is (for example) “1”, and a similar conditional on Button 2, to shoe the border when the custom state value is 2.

When either button is clicked, set the custom state to either 1 or 2 (depending on which button is clicked).

2 Likes

Hi there, @sensei01… I can’t promise someone won’t change it before you can look at it, but since your editor was open, I set up what you have described by using a couple of custom states. Check it out and give a shout if you have any questions.

Best…
Mike

Edit: Adam’s suggestion to use one custom state is cleaner, but I think you’ll get the idea if my changes are still intact when you look at it.

2 Likes

@mikeloc many thanks for the solution. works like a charm :slight_smile: I am still not on the stage to understand custom states, but will be there soon :slight_smile:

1 Like

@adamhholmes many thanks for the reply :). will try to implement it and hope it helps me understand custom states better :slight_smile:

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.