Dropdown box in a repeater

Ask the community
,
1

We have a tourism website that sells Safaris in Africa. On one of the pages we have created a repeater which has a drop down button to expand text for each container. However the code that we have written expands the texts of all of the containers at the same time, what we need it for each individual container to expand text on command. Depending on the page we can have up to 90 cards.

Here is the code we are using at the moment. We just cant figure it out.

1494Ă—994 113 KB

What it looks like before we click the drop down button.

2842Ă—990 491 KB

Here is a example of what it looks like once the drop down button has been clicked.

2822Ă—1604 938 KB

Many thanks for any help we can get.

1 Like
2

//Call function and execute it
DropDownFilter();

//Details what filter function does
function DropDownFilter() {
let iArtistNewValue = event.target.value; // “new value”

const byArtist = wixData.filter().eq( “artist” , iArtistNewValue)

–
My function is DropDownFilter();, and the field I am filtering is “artist”.
If you want it to simply CONTAIN the user’s keyword replace “.eq” with “.contains”. If you would like the dropdown to be case specific (nothing shows that is not exactly what the dropdown says) leave .eq.

3

You will find here …
https://www.wix.com/velo/reference/$w/repeater/onitemready
…what you are missing in your code, to get it to work!

By the way, when you say → DropDown, than i understand something like that…


You will surely use a box or a textfield, which you want to “expand” or to “collapse”.

4

Adding to @russian-dima 's answer: your problem is “scope”. The button has a $w-name which is the same for every item in the repeater, but you don’t want to address ALL instances. Just the one clicked. The repeater, as @russian-dima said, has a provision for that. In short, look at using $item, not $w.