[SOLVED] Creating collapsable text within a repeater

Ask the community
,
1

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:

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 :upside_down_face:).

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

2

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

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.

3

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.