# \[SOLVED\] Creating collapsable text within a repeater

**URL:** <https://forum.wixstudio.com/t/solved-creating-collapsable-text-within-a-repeater/39215>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [July 4, 2022, 4:53pm UTC](https://forum.wixstudio.com/t/solved-creating-collapsable-text-within-a-repeater/39215 "2022-07-04T16:53:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![chicagobull24](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/chicagobull24/32/33952_2.png) [@chicagobull24](https://forum.wixstudio.com/u/chicagobull24)\
**Post date:** [July 4, 2022, 4:53pm UTC](https://forum.wixstudio.com/t/solved-creating-collapsable-text-within-a-repeater/39215/1 "2022-07-04T16:53:16Z")

</div>

Hi all, I have a team page with bios for each member contained in a database. To keep the entries tidy, I have limited the number of characters per biography and added a button that expands and collapses the text of each. However, when a button is first clicked it changes the displayed text to the last entry in the database. Subsequent clicks expand and collapse the text, although still displaying the wrong entry after the initial click.

I’m just starting on my coding journey, so please forgive my ignorance. Here is the code I’m currently using:

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

$w.onReady(function () {
 var shortTextLength = 130;
    $w("#dataset1").onReady( () => {
        $w("#teamRepeater").forEachItem( ($item, itemData, index) => {
    
    fullText = $item("#bioText").text = itemData.bio;
    shortText = fullText.substr(0, shortTextLength) + "...";

    $item("#bioText").text = shortText

    });
    });
});

export function showButton_click(event, $w) {
    if ($w("#bioText").text == shortText){
            $w("#bioText").text = fullText;
            $w("#showButton").label = "Show less";
    } else {
            $w("#bioText").text = shortText;
            $w("#showButton").label = "Show more";
    }}

```

The code is an amalgam of different articles I have found on the forum with some tweaks of my own (which I’m sure has caused irregularities and is the root of my problem 🙃).

If anyone could shed light as to why the bios change and how to prevent it, I would appreciate it 😊

---

<div class="post-metadata">

**Author:** ![chicagobull24](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/chicagobull24/32/33952_2.png) [@chicagobull24](https://forum.wixstudio.com/u/chicagobull24)\
**Post date:** [July 5, 2022, 10:17am UTC](https://forum.wixstudio.com/t/solved-creating-collapsable-text-within-a-repeater/39215/2 "2022-07-05T10:17:52Z")

</div>

For those, like me, that have overcomplicated the issue looking for coding solutions in out-of-date threads, Wix has a collapsible text field under Text → Paragraph → Collapsible Text.

See here: [Wix Editor: Adding and Setting Up Collapsible Text | Help Center | Wix.com](https://support.wix.com/en/article/adding-and-setting-up-collapsible-text#:~:text=To%20edit%20and%20set%20up%20your%20text%3A&text=Type%20or%20paste%20your%20chosen,collapse%20buttons%20in%20the%20fields.)

Connect it to your dataset and you’re good to go!

I hope this saves someone time and effort in their search trying to create something similar.

---

<div class="post-metadata">

**Author:** ![rob38000](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/rob38000/32/36408_2.png) [@rob38000](https://forum.wixstudio.com/u/rob38000)\
**Post date:** [September 12, 2024, 1:21am UTC](https://forum.wixstudio.com/t/solved-creating-collapsable-text-within-a-repeater/39215/3 "2024-09-12T01:21:39Z")

</div>

This doesn’t seem to work within a repeater, which is what the question was. When filling the text in a repeater from a database, the “read more” link doesn’t work.