Calling all experts: Repeaters collapse all but recent one?

Ask the community
,
1

Hi there,

Using repeaters to show messages sent and received, I currently have all the items in my repeater collapsed until clicked, working perfectly. Now with the same existing functionality of click to expand and click to collapse, I’d like to have the last (or most recent) item in the repeater expanded by default upon load. Unless otherwise clicked.

Note: not connected to DB. Manually passing data to repeater

2

If you pass the data manually, so you know in advance how many items you’re gong to have, and you can write the code in accordance.
For example, let’s assume you have 3 items in the repeater, so you set the elements to be collapsed by default (let’s say the elements are in a box named “itemBox”, so you set itemBox to be collapsed on the property panel), and you add code like that;

$w.onReady(function () {
$w("#repeater1").forItems( ["item3"], ($item, itemData, index) => {
 $item("#itemBox").expand();
});
});
3

This is great feedback. However, the number of items in the repeater is constantly changing and unpredictable since they are repeater for messages back and forth with customers. What is the best way to dynamically expand only the last item, regardless of the number of items?

4

@iron-tools Make the “itemBox” collapsed by default and then use the following code:

$w.onReady(function () {
let repeaterData = $w("#repeater1").data;
let lastItemId = repeaterData[repeaterData.length -1]._id;
$w("#repeater1").forItems( [lastItemId], ($item, itemData, index) => {
 $item("#itemBox").expand();
});
});