How to auto-collapse previous collapsible text when expanding a new one in a Wix Repeater?

Ask the community
,
1

I’m working on a reviews section with multiple collapsible text elements inside a Wix Repeater. When I click on one collapsible text item to expand it, I want the previously expanded item to collapse automatically. Additionally, when a user swipes left or right on mobile or when an item goes out of the viewport on both mobile and desktop, the expanded item should collapse.

Here’s what I want to achieve:

  • I have a repeater with multiple collapsible text elements, each containing a review.
  • When a user clicks to expand a new collapsible text, the previously expanded one should collapse.
  • I don’t want more than one collapsible text expanded at the same time.
  • When a user swipes left/right on mobile (or on desktop when the item leaves the viewport), the expanded text should collapse.

Here’s the code I tried, but it doesn’t work:

let openedItem = null;
$w.onReady(() => {
$w(“#repeater10”).onItemReady(($item, itemData, index) => {
const collapse = $item(“#collapsibleText11”);
collapse.onClick(() => {
if (openedItem && openedItem !== collapse) {
openedItem.collapse();
}
if (collapse.collapsed) {
collapse.expand();
openedItem = collapse;
} else {
collapse.collapse();
openedItem = null;
}
});
});
});

This is how it currently looks (I’ll attach a screenshot showing how the layout is broken). Could someone please help me figure out what I’m doing wrong or point me in the right direction to achieve this functionality?

Thanks!

The image shows three side-by-side screenshots of reviews for a business client named TOMSKA, displaying responses from three different customers on a review platform. (Captioned by AI)
The image shows three side-by-side screenshots of reviews for a business client named TOMSKA, displaying responses from three different customers on a review platform. (Captioned by AI)1898×899 316 KB

2

Hi, @Filip_Kulikowski !!

Why not keep it simpler? When any text is clicked, just collapse all the text first. Then, only expand the clicked text. :raised_hands:

3

How can I do it with a code?

4

I want to achieve the behavior you suggested. However, there’s one issue I’m facing.

When I click to expand a review, it does indeed expand as expected, but I also get an issue where the background of the other reviews expands as well, even though the text remains collapsed in the other sections. What I want is that only the clicked review expands, and the background of the others should stay collapsed, without affecting them in any way.

So, to clarify, I want the following behavior:

  • When I click to expand one review, only the clicked review’s text and background should expand.
  • The other reviews should stay collapsed without their backgrounds expanding at all.
  • I don’t want the other reviews’ backgrounds to expand when one review is clicked. Only the content of the clicked review should change.

Here’s the link to the page so you can see the issue yourself: https://www.lumoswooddesign.pl/

Do you have any ideas on how I can modify the code to achieve this?

Thanks in advance!

5

Summarize the reviews to be similar lengths.

6

I think it’s possible to achieve collapsing all other texts when one text is expanded, but controlling the expansion of the background, meaning the repeater itself, might be difficult :thinking:. Essentially, this is part of the repeater’s functionality. It might be possible, but I haven’t tried it myself. Perhaps it would be better to consider not using the repeater. :smiling_face_with_halo: A repeater, as the name suggests, is fundamentally designed to repeat the same layout. So, expecting that behavior in a repeater might not be the most cost-effective solution. :melting_face: