@lanewriters
So you are using this tutorial
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
Using the code for the dynamic text option instead of the static text option.
This is the full code from the tutorial for the show more/show less button option…
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;
}
}
});
export function mybutton_click(event, $w) { //make sure 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";
}
}
So, when you mention in your post that…
but when I preview, the text box and button are missing from the page.
Well look at these few lines of code from within your code used.
// if no text to display, collapse the text element and the button
if (!fullText) {
$w('#myTextElement').collapse();
$w('#myButton').collapse();
So, one important question for you…
Have you got any text setup in your text field in your dataset?
Remembering that the code itself needs to be calling the text from the text field in your dataset and not what field you have linked the element to on your page.
If not, then the code will read it as nothing and collapse the box and button, hence the no showing when you preview.
From the page
This time, the code first reads the contents of the text field of the current item being displayed and stores it in the fullText variable. To make sure that we cover all possibilities, the code then runs 2 checks:
-
It makes sure the field in question actually has text to display. If it does not, both the text element and the button are collapsed. This means your visitors won’t see a “Show More” button without any text above it.
-
It checks the length of the text to make sure it’s longer than the value defined in the shortTextLength variable. If it is not, the text element displays the full text, and the button is collapsed. This means that your visitors won’t see the “Show More” button because there is no more text to show.
Line 8 calls the getCurrentItem() function to read the contents of the textField of the current item and then store it in the fullText variable.
Lines 10-12 check to see if the fullText variable has a value. If the field in the collection is empty, that field is not returned by getCurentItem(), so fullText will have no value. In this case, both the text element and the button are collapsed because there is nothing to display.
