Show More button for dynamic text in a repeater

Ask the community
, ,
1

I am trying to build a site that lists a few physicians and their information. I used a repeater to show a list of the physicians i have added into my database, and each item in the repeater shows the physician’s specialties, introduction and other details (all connected to datasets).

As some of the physician’s introduction can be pretty long, I added a “show more” button to expand and collapse the introduction, based on the tutorial here: https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link .
The expanding and collapsing function works.

BUT 2 problems arose:

  1. As the physician’s introduction is stored as rich text in the database, the “show more” code somehow extracted the html coding and displayed it. (This problem did not exist before i added the “show more” code)

991×366 48.8 KB

991×511 59.7 KB

2. After adding the “show more” code, every physician in the repeater now displays the same introduction (from the 1st physician in the list). Previously, every item on the repeater displayed the introduction of each respective physician.

993×476 38.2 KB

Here’s my code

(No errors were displayed in the editor nor in preview):

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

$w.onReady(function () {
 //TODO: write your page related code here...
                $w("#PhyDataset").onReady(function () {
 // how many characters to include in the shortened version
 const shortTextLength = 40;
 // set the fullText variable to be the text from the collection
                    fullText = $w('#PhyDataset').getCurrentItem().introduction;
 // if no text to display, collapse the text element and the button
 if (!fullText) {
                        $w('#PhyPhyIntro').collapse();
                        $w('#PhyIntroReadMore').collapse();
                    } else {
 // if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button
 if (fullText.length <= shortTextLength) {
                            $w('#PhyPhyIntro').text = fullText;
                            $w('#PhyIntroReadMore').collapse();
                        } else {
 // create the shortened version of the text and display it in the text element
                            shortText = fullText.substr(0, shortTextLength) + "...";
                            $w('#PhyPhyIntro').text = shortText;
                        }
                    }
                });
            });

export function PhyIntroReadMore_click(event) {
 //Add your code for this event here: 
 // check the contents of the text element 
 if ($w("#PhyPhyIntro").text === shortText) {
 // if currently displaying short text, display the full text
                    $w("#PhyPhyIntro").text = fullText;
                    $w("#PhyIntroReadMore").label = "Show less";
                } else {
 // if currently displaying full text, display the short text
                    $w("#PhyPhyIntro").text = shortText;
                    $w("#PhyIntroReadMore").label = "Show more";
                }
            }

Can someone help to suggest solutions to these 2 issues?

Thank you very much :slight_smile:

2

Yisrael mentions on a previous post how to display rich text.
https://www.wix.com/corvid/forum/community-discussion/database-why-doesn-t-the-rich-text-formatting-hold

Remember that whatever you do in the sandbox side of your dataset, always make sure that you sync it to live too.

Also, the code from that tutorial only applies for one text box that is set up with the show more/show less button or the show more toggle.

If you want to have more of them, then you will need to associate the full and short text for each of them in your code.

Something like this.
https://www.wix.com/corvid/forum/community-discussion/multiple-expandable-boxes-with-read-more