Hi Guys
Here is a quick how to on expanding/collapsing repeater texts. Feel free to add to it!
Collapsed:
![](https://static.wixstatic.com/media/a27d24_341be4533a724a379c4c69482a7ceee3~mv2.png/v1/fill/w_49,h_24,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_341be4533a724a379c4c69482a7ceee3~mv2.png)
Expanded:
![](https://static.wixstatic.com/media/a27d24_c9e722fcebc14c3e85401d6fa9d182df~mv2.png/v1/fill/w_49,h_41,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_c9e722fcebc14c3e85401d6fa9d182df~mv2.png)
The logic is quite simple. The first thing I did was to set the text value to blank when the page loads like here. I used .html instead of .text as my database field is rich text
$w.onReady(function () {
$w("#dynamicDataset").onReady(() => {
$w("#repeater1").onItemReady(() => {
$w("#textDescription").html = "";
})
})
});
Then when my open arrow is clicked, I have the following code:
export function arrowOpen_click(event) {
let $item = $w.at(event.context);
$item("#arrowOpen").hide();
$item("#arrowClose").show();
let selectedItem = $item("#dynamicDataset").getCurrentItem();
let description = selectedItem.description;
$item("#textDescription").html = description;
}
And when my closed arrow gets click, the following code runs:
export function arrowClose_click(event) {
let $item = $w.at(event.context);
$item("#arrowClose").hide();
$item("#arrowOpen").show();
let selectedItem = $item("#dynamicDataset").getCurrentItem();
let description = selectedItem.description;
$item("#textDescription").html = "";
}
That's it. Good luck!
Tiaan
This is amazing! thanks! exactly what I wanted. The only problem, is that the code changes my text's design. I used the code as is.. Any suggestion? Thanks again, Dan
Hi Dennis
Thank you for the addition to this post, I think we will probably need all the creativity we can get..
Tiaan
Hey there Tiaan,
I just tried it on my end with some repeaters as well (was going to do the same thing as you on my portfolio item pages). I was having the same issues as you but what I found is that what's likely happening is that there's too much space between the boundaries of your repeater and the text. This page has more info on it: https://support.wix.com/en/article/wix-code-how-page-layout-is-affected-when-elements-change-size.
If you want to keep the text where it is but still have it collapse you can put in some vector images with 0 opacity into the empty space between the boundaries and the text and make those collapse as well. You can also use this between your text and the button to have the repeater collapse snugly around your button like so (just imagine the green vector images as opacity 0, I just made them green to make it clear for showing):
I hope this helps you out.
With kind regards,
Dennis van der Harst
Hi Steve
That was my first plan of action but for some reason it doesn’t collpase the repeater accordingly when used inside the repeater, it just leaves a massive empty space where the text/element used to be. It behaves more like a hide()/show() behaves rather than actually collapsing anything.
Go ahead, try it for yourself.
Tiaan
Hi Tiaan
This is great. Another idea is to use collapse() and expand() instead of show and hide. This way you might not need to keep adding and removing the text.
Try it out?
Cheers