hello everyone
I can't make Toggle Button "Show More/Show Less"
I used code
let fullText;
let shortText;
// For full API documentation, including code examples, visit https://wix.to/94BuAAs
$w.onReady(function () {
const shortTextLength = 40;
$w("#dynamicDataset").onReady(function () {
fullText = $w('#dynamicDataset').getCurrentItem().description;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w('#text5').collapse();
$w('#button13').collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button
if (fullText.length <= shortTextLength) {
$w('#text5').text = fullText;
$w('#button13').collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + "...";
$w('#text5').text = shortText;
}
}
});
});
maybe you should check what $w('#dynamicDataset').getCurrentItem().description; result with console.log() first
For using dynamic text from a dataset your code would look like this.
let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text $w.onReady(function () { $w("#dynamicDataset").onReady(function () { // how many characters to include in the shortened version const shortTextLength = 40; // set the fullText variable to be the text from the collection fullText = $w('#dynamicDataset').getCurrentItem().textField; // if no text to display, collapse the text element and the button if (!fullText) { $w('#myTextElement').collapse(); $w('#myButton').collapse(); } else { // if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button if (fullText.length <= shortTextLength) { $w('#myTextElement').text = fullText; $w('#myButton').collapse(); } else { // create the shortened version of the text and display it in the text element shortText = fullText.substr(0, shortTextLength) + "..."; $w('#myTextElement').text = shortText; } } }); }); //might need this extra line here
Followed with a line space and then either....
export function mybutton_click(event, $w) { //making sure that you have added the onClick event in properties // display the full text $w("#myTextElement").text = fullText; // collapse the button $w("#myButton").collapse(); }
Or this....
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"; } }
If you are using static text then your code would look like this.
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) { //making sure that you have added the onClick event in properties // display the full text $w("#myTextElement").text = fullText; // collapse the button $w("#myButton").collapse(); }
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"; } }