Collapsing text

Discussion Ask a question
, ,
1

Hi, I’m having problems as an ex IT eng (but non-coder) trying to set up a button to collapse text with a button to Read More text.

This is where i’ve got to:

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…
// how many characters to include in the shortened version
const shortTextLength = 40;
// read the full text and store it in the fullText variable
fullText = $w(text99).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(text99).text = shortText;

However, I’m getting ‘text99’ is not defined.

Can someone please help? Thx.

799×164 11.3 KB

2

Simple and quick answer, you are just missing the ‘#elementidname’

See below for full code examples.

3

Code for the “Show More” Button

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 = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").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("#myTextElement").text = shortText;
});

export function mybutton_click(event, $w) { //make sure that you add the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
4

Code for the “Show More/Show Less” Toggle Button

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 = 40;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").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("#myTextElement").text = shortText;
});

export function mybutton_click(event, $w) { //make sure that you add the onClick event in properties
// check the contents of the text element 
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less"; 
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}
5

Great! That worked! Many thanks.