Multiple expanding boxes on same page

Ask the community
, ,
1

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”;
}
}

2

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 ).

3

Thank you for responding so quickly. Can you direct me to where I can see this layout your describing? I’m not a coder and everything I have seen shows it how I’ve done it, however everyone using this method also seems to be having the same issues. What your saying is new (thank you!), but I need to see it so that I can duplicate it, if possible. Thank you!!

4

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.

5

Great, thank you!

6

OK, so I tried redoing it with your example and it’s not working. I’m struggling. What am I doing wrong? There is a parsing (??) error on the first line when I start the exports. I do see that I have the text boxes and buttons listed once in the “const text calls” and twice in the exports but I did adjust them to match and nothing changed.

Here are the errors when I preview it…
public/pages/c9mt4.js: ‘import’ and ‘export’ may only appear at the top level (99:0)
97 | $w(“#text8”).text = shortText8;
98 | >
99 | export function button2_click(event, $w) { | ^
100 | // check the contents of the text element
101 | if ($w(“#text10#text10”).text === shortText1) {
102 | // if currently displaying short text, display the full text

HEre is my code:
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 fullText4; // variable to hold the full text
let fullText5; // variable to hold the full text
let fullText6; // variable to hold the full text
let fullText7; // variable to hold the full text
let fullText8; // 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
let shortText4; // variable to hold the short version of the text
let shortText5; // variable to hold the short version of the text
let shortText6; // variable to hold the short version of the text
let shortText7; // variable to hold the short version of the text
let shortText8; // 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;

// how many characters to include in the shortened version
const shortText2Length = 44;
// read the full text and store it in the fullText2 variable
fullText2 = $w(“#text14”).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(“#text14”).text = shortText2;

// how many characters to include in the shortened version
const shortText3Length = 83;
// read the full text and store it in the fullText3 variable
fullText3 = $w(“#text7”).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(“#text7”).text = shortText3;

// how many characters to include in the shortened version
const shortText4Length = 83;
// read the full text and store it in the fullText4 variable
fullText4 = $w(“#text6”).text;
// grab the number of characters defined in shortText4Length and store them in the shortText4 variable
shortText4 = fullText4.substr(0, shortText4Length) + “…”;
// set the contents of the text element to be the short text
$w(“#text6”).text = shortText4;

// how many characters to include in the shortened version
const shortText5Length = 23;
// read the full text and store it in the fullText5 variable
fullText5 = $w(“#text4”).text;
// grab the number of characters defined in shortText5Length and store them in the shortText5 variable
shortText5 = fullText2.substr(0, shortText5Length) + “…”;
// set the contents of the text element to be the short text
$w(“#text4”).text = shortText5;

// how many characters to include in the shortened version
const shortText6Length = 37;
// read the full text and store it in the fullText6 variable
fullText6 = $w(“#text5”).text;
// grab the number of characters defined in shortText6Length and store them in the shortText6 variable
shortText6 = fullText6.substr(0, shortText6Length) + “…”;
// set the contents of the text element to be the short text
$w(“#text5”).text = shortText6;

// how many characters to include in the shortened version
const shortText7Length = 39;
// read the full text and store it in the fullText7 variable
fullText7 = $w(“#text3”).text;
// grab the number of characters defined in shortText2Length and store them in the shortText7 variable
shortText7 = fullText7.substr(0, shortText7Length) + “…”;
// set the contents of the text element to be the short text
$w(“#text3”).text = shortText7;

// how many characters to include in the shortened version
const shortText8Length = 16;
// read the full text and store it in the fullText8 variable
fullText8 = $w(“#text8”).text;
// grab the number of characters defined in shortText8Length and store them in the shortText8 variable
shortText8 = fullText8.substr(0, shortText8Length) + “…”;
// set the contents of the text element to be the short text
$w(“#text8”).text = shortText8;

export function button2_click(event, $w) {
// check the contents of the text element
if ($w(“#text10#text10”).text === shortText1) {
// if currently displaying short text, display the full text
$w(“#text10#text10”).text = fullText1;
$w(“#button2#button2”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text10#text10”).text = shortText1;
$w(“#button2#button2”).label = “Show More”;
}

export function button3_click(event, $w) {
// check the contents of the text element
if ($w(“#text14#text14”).text === shortText2) {
// if currently displaying short text, display the full text
$w(“#text14#text14”).text = fullText2;
$w(“#button3#button3”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text14text14”).text = shortText2;
$w(“#button3#button3”).label = “Show More”;

export function button4_click(event, $w) {
// check the contents of the text element
if ($w(“#text7#text7”).text === shortText3) {
// if currently displaying short text, display the full text
$w(“#text7#text7”).text = fullText3;
$w(“#button4#button4”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text7text7”).text = shortText3;
$w(“#button4#button4”).label = “Show More”;

export function button5_click(event, $w) {
// check the contents of the text element
if ($w(“#text6#text6”).text === shortText4) {
// if currently displaying short text, display the full text
$w(“#text6#text6”).text = fullText4;
$w(“#button5#button5”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text6text6”).text = shortText4;
$w(“#button5#button5”).label = “Show More”;

export function button6_click(event, $w) {
// check the contents of the text element
if ($w(“#text4#text4”).text === shortText5) {
// if currently displaying short text, display the full text
$w(“#text4#text4”)).text = fullText5;
$w(“#button6#button6”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text4#text4”)).text = shortText5;
$w(“#button6#button6”).label = “Show More”;

export function button7_click(event, $w) {
// check the contents of the text element
if ($w(“#text5#text5”).text === shortText6) {
// if currently displaying short text, display the full text
$w(“#text5#text5”)).text = fullText6;
$w(“#button7#button7”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text5#text5”)).text = shortText6;
$w(“#button7#button7”).label = “Show More”;

export function button8_click(event, $w) {
// check the contents of the text element
if ($w(“#text3#text3”).text === shortText7) {
// if currently displaying short text, display the full text
$w(“#text3#text3”)).text = fullText7;
$w(“#button6#button6”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text3#text3”)).text = shortText7;
$w(“#button8#button8”).label = “Show More”;

export function button9_click(event, $w) {
// check the contents of the text element
if ($w(“#text8#text8”).text === shortText8) {
// if currently displaying short text, display the full text
$w(“#text8#text8”)).text = fullText8;
$w(“#button9#button9”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text8#text8”)).text = shortText8;
$w(“#button9#button9”).label = “Show More”;
}

7

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