Hello, i reach out to support on how to create a expandable box with a read more button and they sent me to the below link which worked.
https://support.wix.com/en/article/request-expandable-text-boxes-with-a-read-more-link
but i need to add multiple boxes within a single page and i cant seem to figure out how. any help would bee great.
Did you solve this problem? I have the same issue!
To do that just use the code for show more and add the extras into the code.
Code for the “Show More” Button with just the one box.
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();
}
So for more than just the one show more box, you just change the full and short text comments to match up with you page elements, something like this below, although you will need to make sure that all the curly brackets and parentheses, which are ‘(’ and ‘)’ and ‘{’ and ‘}’ are matching in your code yourself.
let fullText1; // variable to hold the full text
let fullText2; // variable to hold the full text
let fullText3; // variable to hold the full text
let shortText1; // variable to hold the short version of the text
let shortText2; // variable to hold the short version of the text
let shortText3; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
const shortText1Length = 40;
// read the full text and store it in the fullText1 variable
fullText1 = $w("#myTextElement1").text;
// grab the number of characters defined in shortText1Length and store them in the shortText1 variable
shortText1 = fullText1.substr(0, shortText1Length) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement1").text = shortText1;
});
// how many characters to include in the shortened version
const shortText2Length = 40;
// read the full text and store it in the fullText2 variable
fullText2 = $w("#myTextElement2").text;
// grab the number of characters defined in shortText2Length and store them in the shortText2 variable
shortText2 = fullText2.substr(0, shortText2Length) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement2").text = shortText2;
});
// how many characters to include in the shortened version
const shortText3Length = 40;
// read the full text and store it in the fullText3 variable
fullText3 = $w("#myTextElement3").text;
// grab the number of characters defined in shortText3Length and store them in the shortText3 variable
shortText3 = fullText3.substr(0, shortText3Length) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement3").text = shortText3;
});
export function mybutton1_click(event, $w) {
// display the full text
$w("#myTextElement1").text = fullText1;
// collapse the button
$w("#myButton1").collapse();
}
export function mybutton2_click(event, $w) {
// display the full text
$w("#myTextElement2").text = fullText2;
// collapse the button
$w("#myButton2").collapse();
}
export function mybutton3_click(event, $w) {
// display the full text3
$w("#myTextElement3").text = fullText3;
// collapse the button
$w("#myButton3").collapse();
}
Also, remember when you are using just the show more option, then this happens as stated in the tutorial.
I’ve got a similar problem. When I copy paste this code, add my personal text/button names etc. the text just dissapears when I view my page. I’ve tried moving the button around, in the text or underneath the text. But still nothing.
There are no errors, just no text and a button that doesn’t do anything.
What did I do wrong? Hope somebody can help me.
i got this problem too and there is no answer by support team…
i got this problem too…and no answer by the support team…that s a shame…