Requesting a help in removing a whitespace between text element and button element while creating a functional show more/ less link. Pl see: I went through related queries that had discussed the same issue but none of them had suggested the solution to it. I hope now somebody has a solution to it. I am attaching the video for a better understanding of my query.
Pl look to it and try to reply. Also the code i tried is below i m sharing..
let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text $w.onReady(function () { // how many characters to include in the shortened version const shortTextLength = 104; // you can change this number // read the full text and store it in the fullText variable fullText = $w("#showmoreText").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("#showmoreText").text = shortText; }); export function myButton_click(event,$w) { // check the contents of the text element if ($w("#showmoreText").text === shortText) { // if currently displaying short text, display the full text $w("#showmoreText").text = fullText; $w("#myButton").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#showmoreText").text = shortText; $w("#myButton").label = "Show more"; } }
id for text element is #showmoreText
id for button element is #myButton
I tried collapse on load for text element, it worked but the entire text element got collapsed and nothing appears, show more less button labels are changing on click but not expanding.
Would highly appreciate any help.
Regards.