# Repeater item scope -show more/less text in a repeater example

**URL:** <https://forum.wixstudio.com/t/repeater-item-scope-show-more-less-text-in-a-repeater-example/16606>\
**Category:** Show and tell\
**Tags:** tips, code\
**Created:** [February 19, 2019, 2:13pm UTC](https://forum.wixstudio.com/t/repeater-item-scope-show-more-less-text-in-a-repeater-example/16606 "2019-02-19T14:13:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![massasalah18](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/massasalah18/32/876_2.png) [@massasalah18](https://forum.wixstudio.com/u/massasalah18)\
**Post date:** [February 19, 2019, 2:13pm UTC](https://forum.wixstudio.com/t/repeater-item-scope-show-more-less-text-in-a-repeater-example/16606/1 "2019-02-19T14:13:43Z")

</div>

```
 #Repeater #RepeaterItems #ItemsScope #showMoreText 

```

In this example I will go over the different ways of accessing a repeater item scope. There are many different ways, each with their own pros and cons.

Useful articles to read first:

- [repeater item scope](https://www.wix.com/code/reference/$w.Repeater.html#repeated-item-scope)
- [at()](https://www.wix.com/code/reference/$w.html#at)

Selector scopes in a repeater are divided into two categories, the **Global scope** and the **Repeated item scope**.

* * *

**Global Scope:**

The **$w()** function that is available to your Page and Site code selects elements in the global scope. A selector with global scope can be used to select any element that is not contained in a repeater. You can also use it to select an element that is contained in a repeater.

The following code is an example of how to implement show more/less functionalities to repeater items using **$w** :

```javascript
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

$w.onReady(function () {
 const shortTextLength = 40;
    fullText = $w("#text1").text
    shortText = fullText.substr(0, shortTextLength) + "...";
    $w("#text1").text = shortText;

    $w('#repeater1').forEachItem(($w, itemData, index) => {
        $w('#button1').onClick((event) => {
        if ($w("#text1").text === shortText) {
                $w("#text1").text = fullText;
                $w("#button1").label = "Show Less";
            } else {
                $w("#text1").text = shortText;
                $w("#button1").label = "Show More";
            }
        })
    })
});

```

* * *

Repeated item scope:  
There are two instances where you get a repeated-item-scope selector:

- The $item parameter of the forEachItem(), forItems(), and onItemReady() event handlers.

- When calling the $w.at() and passing it an event whose context is “COMPONENT\_SCOPE”. This is usually done in an event handler that handles event on an element inside a repeater.  
The following code is the same implementation using $item:

```javascript
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

$w.onReady(function () {
 const shortTextLength = 40;
    fullText = $w("#text1").text
    shortText = fullText.substr(0, shortTextLength) + "...";
    $w("#text1").text = shortText;

    $w('#repeater1').forEachItem(($item, itemData, index) => {
        $item('#button1').onClick((event) => {
        if ($item("#text1").text === shortText) {
                $item("#text1").text = fullText;
                $item("#button1").label = "Show Less";
            } else {
                $item("#text1").text = shortText;
                $item("#button1").label = "Show More";
            }
        })
    })
});

```

And now using At():

```javascript
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

$w.onReady(function () {
 const shortTextLength = 40;
    fullText = $w("#text1").text
    shortText = fullText.substr(0, shortTextLength) + "...";
    $w("#text1").text = shortText;

    $w('#button1').onClick((event, $w) => {
 let $item = $w.at(event.context)
        $item("#myRepeatedText").text = "Selected";
 if ($item("#text1").text === shortText) {
            $item("#text1").text = fullText;
            $item("#button1").label = "Show Less";
        } else {
            $item("#text1").text = shortText;
            $item("#button1").label = "Show More";
        }
    })
})

```

* * *

Now looking at the three code examples we get to know how to access repeater item scope using different selectors. It’s obvious that if you are trying to access and element it is best using $item, however if you want o add at event the best approach would be to use at() as it sets the selected element based on the event scope.

Hope this helps!

Massa

---

<div class="post-metadata">

**Author:** ![rezende](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/rezende/32/8764_2.png) [@rezende](https://forum.wixstudio.com/u/rezende)\
**Post date:** [February 21, 2019, 1:10am UTC](https://forum.wixstudio.com/t/repeater-item-scope-show-more-less-text-in-a-repeater-example/16606/2 "2019-02-21T01:10:47Z")

</div>

Amazing, this code fits into my project. Thanks for the examples!

![](https://us1.discourse-cdn.com/wix/original/3X/3/3/3343d5afc5648ac49381610393cdf7e991cf918f.jpeg)