I'm prefacing this post with the fact that I am NOT a coder or developer, but simply followed instructions from Wix as best I could—so please bear with my ignorance.
I've added a view more/view less toggle button with static text (not dynamic text) to create an expandable text box in a repeated element, by copying and pasting the code to create an expandable text box per the Wix instructions on this page:
https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code
The view less/view more button and truncation of the text is working fine, but I'm having a major issue with the content (first bulleted item, below), and I also have some other questions:
• When I check the functionality of the button in preview mode, the content-specific text changes within each element to the same text that's in the first element (so each element contains the same text when truncated). I'm sure the problem is with the code, but don't know how to fix it. The code is below, between the horizontal lines. I've also attached a screen shot of the code, as well as screen shots of the page in the editor view, with the full, expanded text, and the preview, with the truncated text.
let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text // For full API documentation, including code examples, visit http://wix.to/94BuAAs $w.onReady(function () { 1 2 3 4 5 6 7 8 // how many characters to include in the shortened version const shortTextLength = 236; // read the full text and store it in the fullText variable fullText = $w("#text4").text; // grab the number of characters defined in shortTextLength and store them in the shortText variable shortText = fullText.substr(0, shortTextLength) + "..."; // set the contents of the text element to be the short text $w("#text4").text = shortText; //TODO: write your page related code here... }); export function button1_click(event, $w) { // check the contents of the text element if ($w("#text4").text === shortText) { // if currently displaying short text, display the full text $w("#text4").text = fullText; $w("#button1").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text4").text = shortText; $w("#button1").label = "Show more"; } }
The other questions I have are these:
• I was hoping that when the text is collapsed (by default) that the box would collapse with it; I don't want a long box with lots of empty space, which you see in the last screen shot. Is this possible?
• Is it possible to change the way the "View less" button looks so it matches the "View more" button?
Thank you in advance for your help.
Hello
here your working with a repeater so you cant set the $w("#text4").text like that as all the items of the repeater have the same text box with the same id. Try using $w("#myRepeater").forEachItem to set each items' text to it's right value inside the button click event.
check repeaters here: https://www.wix.com/code/reference/$w.Repeater.html#forEachItem
Best
Massa
Thank you, Massa. I will look into this in a few days and let you know how it goes!