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 = 50;
// 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();
}
Check the property panel and make sure the element id is correct and that the click function is marked on.
thanx!!! its works!
hi but i have another problem the code above is not dinamic
i tried this but not working:
$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;
}
}
});
Your code looks fine (assuming that you have $w.onReady() and button_click and you just didn’t post them).
Also, make sure that you follow the actual tutorial itself and not copy the code from previous forum posts.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
That way you don’t miss out on anything like J.D. has already mentioned above, like making sure that your element id matches your code and you have added an onClick event handler function to the appropriate element.
Working with Static Text
Plus, if you are using dynamic text, then you have to make sure that you use the appropriate text field from your own dataset and not just copy code.
Working with Dynamic Text
Code for the “Show More” Button (Static)
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 (Static)
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
constshortTextLength = 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";
}
}
Code for the “Show More/Show Less” Toggle Button (Dynamic)
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
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";
}
}
I wondered how long this would take to come around again in 2020 