Font size in text after clicking on 'read more' button

Ask the community
,
1

Hi All,
I have added the code for the ‘read more’ button on my site. However, he takes over this entire piece in the font size of the first sentence. Can someone help me?

In the editor:

958×624 99.4 KB

In preview mode:

932×575 95.6 KB

This is the code I used:

1118×484 20.7 KB

I am a beginner in code so I prefer easy language haha.

2

Remember that the number 40 in this code for ‘how many characters to include in the shortened version’ refers to how many letters will be shown when your text element is in the short version. It does not relate to the show more button.

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();
}
3

Remember that the number 40 in this code for ‘how many characters to include in the shortened version’ refers to how many letters will be shown when your text element is in the short version. It does not relate to the show more button.

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";
}
}
4

I added that code, but still have the same font size… I’m not struggling with ‘how many characters to include in the shortened version’ but with font size. Hopefully you can help me…