Hi there, I am a newbie and try myself on corvid. First I wanted to create a button that hides everything of a text that has more than 20 letters (see picture 1). If this button is clicked all the text shall be shown and the button should change to “show less”. Unfortunately I get the error like in picture 2. Could you help me out and say what I forgot/did wrong in the code (see picture 3 or code text below)?
I`d really appreciate your help!
Best wishes,
Julian
let fullText;
let shortText;
$w.onReady(function () {
const shortTextLength = 20;
fullText = $w("#text12").text;
shortText = fullText.substr(0, shortTextLength) + "...";
$w("#text12").text = shortText;
});
export function iconButton1_click(event) {
// display the full text
$w("#text12").text = fullText;
// collapse the button
$w("#iconButton1").collapse();
}
if ($w("#text12").text === shortText) {
$w("#text12").text = fullText;
$w("#iconButton1").label = "Show less";
} else {
$w("#text12").text = shortText;
$w("#iconButton1").label = "Show more";
}
As Yisrael has stated above, you are mixing up the code for the show more button with the show more/show less toggle after your initial code under the onReady function.
Always double check your code and read those tutorial pages carefully as most of them give you multiple options for the code to work, so you need to follow them precisely and not get code mixed up. It will get easier and easier as you get more into using it.
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) { //making sure that you have added 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";
}
}
Hello there. Thanks for the tips. I have successfully created the button.
But, how many Show More/ Show Less buttons can we created in one page? I tried to add a second one but did not succeed.
Please refer to our forum guidelines and start a new post rather than jumping onto an old post.
If you need anymore help with this issue, then please use a new post.
As for your question, you can have multiple numbers of these, you just have to change your code to suit it.
