How to affect nested element when parent is clicked

[shibbydoo]

Hi,

I’m trying to implement button select/unselect state, I have a linked div as my button and a div with a border set in the linked div.

–linked div
-----div with border

I would like to have a background color for the div with border when the linked div is clicked but I’m not sure I can actually do that. The options in the interaction panel are very limited, is there a way to make this work? Thanks!

[Cricitem (webTAC | Technology Apprenticeship Center)]

As of this moment, you cannot use interactions to adjust the CSS of elements. Once interactions 2.0 comes, however, that problem should be solved.

[vincent (Vincent Bidaux)]

@Cricitem

Once interactions 2.0 comes, however, that problem should be solved.

I2 is going to be a lot better but I’m not sure it’ll give us control over all the CSS properties of elements…

[vincent (Vincent Bidaux)]

Using workarounds, yes. To achieve that you usually have to design the 2 states of your element and pile them up. Like have 2 divs inside your parent, one on top of each other. the one on top named something like ‘normal state’ and the other one ‘clicked state’. Now on the parent, make an interaction that hides the child on top (normal) thus showing the one designed for clicked state. It’s just and example of a strategy but there are other possible.