# Hide/show items in repeater

**URL:** <https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [June 19, 2018, 11:04am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952 "2018-06-19T11:04:54Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ingridhelenaandersso](https://avatars.discourse-cdn.com/v4/letter/i/48db29/32.png) [@ingridhelenaandersso](https://forum.wixstudio.com/u/ingridhelenaandersso)\
**Post date:** [June 19, 2018, 11:04am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/1 "2018-06-19T11:04:54Z")

</div>

Hello,  
I have a repeater displaying team member content from my data collection (image, name etc). So far so good. However, I would like to have a ‘Bio’ button inside the repeater which, upon click, opens a text box with a short biography. And then preferably closes the same box upon a second click.  
Simple enough, but I’ve tried a million different variants of onClick, .show()/.hide() by now! Could someone please please share a string of working code? It works okay with items _outside_ the repeater, but never when I apply code to something inside it. Thank you so much!

---

<div class="post-metadata">

**Author:** ![marius-jurgelenas](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/marius-jurgelenas/32/669_2.png) [@marius-jurgelenas](https://forum.wixstudio.com/u/marius-jurgelenas)\
**Post date:** [June 20, 2018, 9:26am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/2 "2018-06-20T09:26:30Z")

</div>

Hi Helena,

this is a part of the code you are looking for:

```javascript
$w("#image1").onClick(async (event, $w) => {
  const book = await wixData.get('Books', event.context.itemId)
  console.log(book) // your custom logic goes here
})

```

I have a ‘Books’ collection. In a page I display books with a repeater, where every book has a cover image displayed by an element with id ‘#image1’. OnClick handler gets attached for every image inside the repeater. Then, when the user clicks on an image, I extract the id of that specific book from the event, and then I query wixData for that specific id. Then I get the whole book object, which I can feed to a custom element and then show it on the page.

hope that helps,  
Marius

---

<div class="post-metadata">

**Author:** ![ingridhelenaandersso](https://avatars.discourse-cdn.com/v4/letter/i/48db29/32.png) [@ingridhelenaandersso](https://forum.wixstudio.com/u/ingridhelenaandersso)\
**Post date:** [June 20, 2018, 9:57am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/3 "2018-06-20T09:57:07Z")

</div>

Dear Marius, thank you for sharing!  
However, my very limited .js skills can’t really get it to work…

This is what I just tested:

```javascript
import wixData from 'wix-data';
 
   $w("#biobutton").onClick(async (event, $w) => {
 const bio = await wixData.get('Team', event.context.itemId)
  console.log(bio) // your custom logic goes here
  $w('#biotext').show();
})

```

#biobutton is the button that I want to click on to trigger the textbox #biotext, ‘Team’ is my data collection and ‘bio’ is the column containing the various texts I want to show. Obviously there’s something I’m not getting, would you mind helping out again? Thank you so much.

Helena

---

<div class="post-metadata">

**Author:** ![marius-jurgelenas](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/marius-jurgelenas/32/669_2.png) [@marius-jurgelenas](https://forum.wixstudio.com/u/marius-jurgelenas)\
**Post date:** [June 20, 2018, 11:03am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/4 "2018-06-20T11:03:58Z")

</div>

what does it print in the console when you click the button? you can open the console in the preview mode by pressing on ‘Developer Console’ in the bottom of the screen

---

<div class="post-metadata">

**Author:** ![ingridhelenaandersso](https://avatars.discourse-cdn.com/v4/letter/i/48db29/32.png) [@ingridhelenaandersso](https://forum.wixstudio.com/u/ingridhelenaandersso)\
**Post date:** [June 20, 2018, 11:11am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/5 "2018-06-20T11:11:46Z")

</div>

It says:  
There was an error in your script  
Error: The element selector function (usually $w) cannot be used before the page is ready

---

<div class="post-metadata">

**Author:** ![marius-jurgelenas](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/marius-jurgelenas/32/669_2.png) [@marius-jurgelenas](https://forum.wixstudio.com/u/marius-jurgelenas)\
**Post date:** [June 20, 2018, 11:12am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/6 "2018-06-20T11:12:30Z")

</div>

Also, if you are not sure what you are doing with the js code, you could consider using a dynamic page instead of the modal box for the bio. You can easily find an example how to do it in the wixCode documentation

---

<div class="post-metadata">

**Author:** ![marius-jurgelenas](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/marius-jurgelenas/32/669_2.png) [@marius-jurgelenas](https://forum.wixstudio.com/u/marius-jurgelenas)\
**Post date:** [June 20, 2018, 11:17am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/7 "2018-06-20T11:17:22Z")

</div>

The code was just a snippet. You need to wrapt it with:

```javascript
$w.onReady(function () {
  //your code
})

```

please write if it doesnt workt

---

<div class="post-metadata">

**Author:** ![ingridhelenaandersso](https://avatars.discourse-cdn.com/v4/letter/i/48db29/32.png) [@ingridhelenaandersso](https://forum.wixstudio.com/u/ingridhelenaandersso)\
**Post date:** [June 20, 2018, 11:18am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/8 "2018-06-20T11:18:11Z")

</div>

Yes, I was considering that too… Also tried using a table. It’s just a bit less elegant, and heavier to load, than a simple pop-up. It seems like such a small thing, but the repeater makes everything difficult!

---

<div class="post-metadata">

**Author:** ![ingridhelenaandersso](https://avatars.discourse-cdn.com/v4/letter/i/48db29/32.png) [@ingridhelenaandersso](https://forum.wixstudio.com/u/ingridhelenaandersso)\
**Post date:** [June 20, 2018, 11:32am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/9 "2018-06-20T11:32:36Z")

</div>

Thanks again!

Tried:

```javascript
$w.onReady(function () 
{
 //your code
     $w("#biobutton").onClick(async (event, $w) => {
 const bio = await wixData.get('Team', event.context.itemId)
  console.log(bio)
  $w('#biotext').show();
})

```

And get: ‘Parsing error: Unexpected token’ for the final row.  
The console reads:

```javascript
 public/pages/gsel1.js: Unexpected token (8:2) 6 | console.log(bio) 7 | $w('#biotext').show(); > 8 | }) | ^
 

```

---

<div class="post-metadata">

**Author:** ![ingridhelenaandersso](https://avatars.discourse-cdn.com/v4/letter/i/48db29/32.png) [@ingridhelenaandersso](https://forum.wixstudio.com/u/ingridhelenaandersso)\
**Post date:** [June 21, 2018, 1:54pm UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/10 "2018-06-21T13:54:10Z")

</div>

Now it works!! So happy, couldn’t have done it without you Marius. Thank you! 🙂

My final code, if anyone else needs it:

```javascript
 import wixData from 'wix-data';

$w.onReady(function () {
     $w("#biobutton").onClick(async (event, $w) => {
 const bio = await wixData.get('Team', event.context.itemId)
  console.log(bio)
  $w('#textgroup').show("fade");
  } );
} )

export function closebutton_click(event, $w)
 {
 //Add your code for this event here: 
  $w("#textgroup").hide("fade");
}

```

‘biobutton’ - the button to click in order to show the textbox  
‘Team’ - the concerned data collection  
bio - the Id of the column where text is imported from  
‘textgroup’ - the textbox + a white background box + ‘closebutton’  
‘closebutton’ - a button that closes the textbox

---

<div class="post-metadata">

**Author:** ![marius-jurgelenas](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/marius-jurgelenas/32/669_2.png) [@marius-jurgelenas](https://forum.wixstudio.com/u/marius-jurgelenas)\
**Post date:** [June 22, 2018, 5:19am UTC](https://forum.wixstudio.com/t/hide-show-items-in-repeater/35952/11 "2018-06-22T05:19:42Z")

</div>

Great! Its good to hear that you didn’t give up on this 🙂 also, you can safely remove the line with console.log - it is for debugging purposes only.