Skip to main content

Hi there,


I’m sure this comes up a lot but I wondered what the best way of highlighting one item in a list of items is on click? I know I can change component variant on click but this won’t change the others back. Here’s what I need:


List of Items - Default Not Highlighted

Click on item - Highlight Item

Click on different item - Highlight this item but UNHIGHLIGHT other item


What is the best way of doing this?


This is the only way I can do it at present which is laborious and requires a new component for every version of the list. Seems like an inefficient way to do it!


image


Thanks

Jen

Well, it seems you can make it a bit easier with variables


This is how I did it. Firstly you would need a list component where each variant contains only one selected item

image


image


Then you create a variable to bound to the selected property of your list

image


Lastly, you make each list item to set a variable value. I use the multi-edit feature so I don’t have to touch every single list item in every variant I made

image


And now I have one


But for a list of 13 items you need to have 13 variants, still a big ouch

Thank you for that I thought something like that would be possible! I’ll give that a go.

This worked thanks! Thanks for mentioning multi-edit, hadn’t realised this was possible so that’s a life saver!

Glad it helped, cheers

Reply


Terms & ConditionsCookie settings