Use interactions inside a query loop

How To
1

Hello,

I can’t find a way to target classes inside a single loop item using Bricks’s interactions. For example, if I click on a button to show another element. It will apply to all loop elements. Displaying the element on all the loop items (problem shown in the captures).

I would like to only target the current loop element.

Any idea on how to achieve this?

%root% doesn’t seem to work in the targeted class.

animate-class-1
animate-class-14152×1030 155 KB

animate-class-2
animate-class-24168×1170 173 KB

2

Hi, @weare There are many ways to achieve this. One of the simplest ways is to use nested Accordion. Use Nestable Accordion and loop on each item.

NOTE: Loop on inside items not on the whole Accordion widget.

This will solve your problem. You don’t need to use custom code for this functionality.

Let me know if this solution was helpful.

Thanks :blush:

3

Didn’t think of that, I will try! Thanks a lot for the idea.

4

I have tried but without success. I really need to “flip” the card when clicking the + icon and to switch back when clicking the - icon.

Here is a full example of the card. Obviously, only one has to be shown at the time. In a query loop.

capture
capture1398×1444 198 KB

Any other idea? Accordeon seems like a different design by essence.

5

@weare I think the accordion wrapper has a align-items: stretch property. Therefore you are seeing this behavior. You will need to change flex properties for main accordion wrapper to move all accordion items at the top.

I guess there is option for it inside the builder.

If you didn’t get my point then please share your website link, and I will check that.

Thanks,

6

@timmse i think we need something like %root% to define the this element on css selector target on interaction feature

7

I have a similar issue.