Q-expansion-item conditional class on expanded item

[quasy]

Hi,

I am trying to have a :class for coloring the background of an expanded item in my q-expansion-item list. So if expanded, it looks one way but if not, it looks like the rest of the items in the list.

Since this is bound to a v-for (with the items coming from a script array), v-model does not seem to be a workable path.

Thanks so much for reviewing.

Quasy

[metalsadman]

@quasy a codepen would help.

[quasy]

@metalsadman - good idea. Thanks much for suggesting

https://codepen.io/quasy/pen/ExKZrwE

When any item is expanded, I want to have it stand out with a different, color, etc.

[quasy]

Is this possible… does anyone know?

[beets]

@quasy The class q-expansion-item--expanded is already applied to the expansion item when expanded, why not just use that and target it in css?

[quasy]

@beets That sounds like exactly what I want but I am too new to this code to know hot to do that. When I try to check for q-expansion-item-expanded or expanded to set a conditional :class, it does not work. Could you please explain further. Sorry to be asking such newbie questions!

[Geita]

.q-expansion-item–expanded {
color: green;
}.

[beets]

@quasy No problem on the question, the idea is that you don’t need to conditionally apply a class, since Quasar already does it. You would add something like this in your css to style the list item:

.q-expansion-item--expanded .q-item {
  background: green;
}

[quasy]

@beets THANK YOU! Perfect. It looks exactly as I want!! Thanks for being patient with me also.