I have read many posts about this same problem and have tried all of the different suggestions I've seen. Nothing is working. My first two expandable boxes and "Show More" boxes work. However, once I get to the third box it does not expand. Any suggestions. Here is the code I currently have...
let fullText1; // variable to hold the full text
let shortText1; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 23;
// read the full text and store it in the fullText1 variable
fullText1 = $w("#text10").text;
// grab the number of characters defined in shortTextLength and store them in the shortText1 variable
shortText1 = fullText1.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#text10").text = shortText1;
});
export function button2_click(event, $w) {
// check the contents of the text element
if ($w("#text10").text === shortText1) {
// if currently displaying short text, display the full text
$w("#text10").text = fullText1;
$w("#button2").label = "Show Less";
} else {
// if currently displaying full text, display the short text
$w("#text10").text = shortText1;
$w("#button2").label = "Show More";
}
}
let fullText2; // variable to hold the full text
let shortText2; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 44;
// read the full text and store it in the fullText2 variable
fullText2 = $w("#text14").text;
// grab the number of characters defined in shortTextLength and store them in the shortText2 variable
shortText2 = fullText2.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#text14").text = shortText2;
});
export function button3_click(event, $w) {
if ($w("#text14").text === shortText2) {
// if currently displaying short text, display the full text
$w("#text14").text = fullText2;
$w("#button3").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#text14").text = shortText2;
$w("#button3").label = "Show more";
}
}
let fullText3; // variable to hold the full 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 shortTextLength = 83;
// read the full text and store it in the fullText3 variable
fullText3 = $w("#text7").text;
// grab the number of characters defined in shortTextLength and store them in the shortText3 variable
shortText3 = fullText3.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#text7").text = shortText3;
});
export function button5_click(event, $w) {
// check the contents of the text element
if ($w("#text7").text === shortText3) {
// if currently displaying short text, display the full text
$w("#text7").text = fullText3;
$w("#button5").label = "Show Less";
} else {
// if currently displaying full text, display the short text
$w("#text7").text = shortText3;
$w("#button5").label = "Show More";
}
}
let fullText4; // variable to hold the full text
let shortText4; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 83;
// read the full text and store it in the fullText4 variable
fullText4 = $w("#text6").text;
// grab the number of characters defined in shortTextLength and store them in the shortText4 variable
shortText4 = fullText4.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#text6").text = shortText4;
});
export function button6_click(event, $w) {
if ($w("#text6").text === shortText4) {
// if currently displaying short text, display the full text
$w("#text6").text = fullText4;
$w("#button6").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#text6").text = shortText4;
$w("#button6").label = "Show more";
}
}
https://www.wix.com/corvid/forum/community-discussion/problem-when-create-multiple-show-more-links-and-text-boxes
https://www.wix.com/corvid/forum/community-discussion/creating-multiple-show-more-show-less-links
Great, thank you!
You simply need to cut and paste your code so that all your lets are at the top...
let fullText1;
let fullText2;
let shortText1;
let shortText2;
Then your page onReady function....
$w.onReady(function () {
Then all your const text calls.
// how many characters to include in the shortened version
const shortTextLength = 23;
// read the full text and store it in the fullText1 variable
fullText1 = $w("#text10").text;
// grab the number of characters defined in shortTextLength and store them in the shortText1 variable
shortText1 = fullText1.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#text10").text = shortText1;
//then same for text 2
//then same for text 3 etc...
Then all your exports for the buttons...
export function button2_click(event, $w) {
// check the contents of the text element
if ($w("#text10").text === shortText1) {
// if currently displaying short text, display the full text
$w("#text10").text = fullText1;
$w("#button2").label = "Show Less";
} else {
// if currently displaying full text, display the short text
$w("#text10").text = shortText1;
$w("#button2").label = "Show More";
}
//same for next button
//same for next button etc..
If you search in this forum for show more show less or different variants of that, you will find lots of previous forum posts about it and in those you should find a couple of them that have the multiple uses in code on them.
So you are using this tutorial.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
Well this is only setup for the one option, if you want to do it as multiple options then you need to sort your code to suit it.
You need to have all your let text calls at the top of the page, then your page ONE onReady function call and NOT multiple onReady functions throughout the page.
Then you need to list all your const shortTextLength parts of your code in order.
With having all your export functions for the button underneath in order too.
Finally, you will need to make sure that you have matching equal pairs of curly brackets and parentheses which are the open { and ( and the closed } and ).