Problem when create multiple "Show more" links and text boxes

Ask the community
, ,
1

I have problem when I’m creating multiple “Show more” links on one page, as per insturction on: https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link

It works fine when I only create one “Show more button” and text box. However, the problem is that when I create second “Show more button” and text box. Both buttons only display second text box when click.

My example:
The first “show more button” and text box id are #button3 and #text35
The second “show more button” and text box id are #button4 and #text36
I want full text of #text35 displayed when click #button3 and full text of #text36 displayed when click #button4.
However, once I created the below code, by clicking either button3 or button4, only #text36 displayed under both buttons.

Anyone know how to resolve it?

Code:

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
//how many characters to include in the shortened version
const shortTextLength = 0;
//read the full text and store it in the fullText variable
fullText = $w(“#text35”).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 text35 to be the short text
$w(“#text35”).text = shortText;
});

export function button3_click(event, $w) {
// check the contents of the text element
if ($w(“#text35”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text35”).text = fullText;
$w(“#button3”).label = “- Plan your departure”
} else {
// if currently displaying full text, display the short text
$w(“#text35”).text = shortText;
$w(“#button3”).label = “+ Plan your departure”
}
}

$w.onReady( function () {
//how many characters to include in the shortened version
const shortTextLength = 0;
//read the full text and store it in the fullText variable
fullText = $w(“#text36”).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 text36 to be the short text
$w(“#text36”).text = shortText;
});

export function button4_click(event, $w) {
// check the contents of the text element
if ($w(“#text36”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text36”).text = fullText;
$w(“#button4”).label = “- Arrival”
} else {
// if currently displaying full text, display the short text
$w(“#text36”).text = shortText;
$w(“#button4”).label = “+ Arrival”
}
}

2

Hey there!
You have defined one variable called fullText and one shortText and you use that in both click events so that is why the same text is being displayed.

You also have two onReady functions in your page which is wrong, make them one and define inside that one

let fullTextOne = “”;
let shortTextOne = “”;
let fullTextTwo = “”;

and in onReady

fullTextOne = $w(“#text35”).text;
fullTextTwo = $w(“#text36”).text;

And so on…

3

Hello

I wrote the same Code as Wayne above. But my problem is, that I get an parsing error for line 44 (in my added code here marked italic and underlined) which says “import and export may only appear on top level”. But the first export function works like that. Do i have to give them unique names as well?

Tank you for your help!

Fabian

Code:

let fullTextOne; // variable to hold the full text
let shortTextOne; // variable to hold the short version of the text
let fullTextTwo; // variable to hold the full text
let shortTextTwo; // variable to hold the short version of the text
// Besuchen Sie für die komplette API-Dokumentation einschließlich Codebeispielen Velo API Reference - Wix.com
// how many characters to include in the shortened version
$w.onReady( function () {
const shortTextLength = 668;
// read the full text and store it in the fullText variable
fullTextOne = $w(“#text7”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextOne = fullText.substr(0, shortTextLength);
// set the contents of the text element to be the short text
$w(“#text7”).text = shortTextOne;
//TODO: write your page related code here…

});

export function button1_click(event, $w) {
// display the full text
// check the contents of the text element
if ($w(“#text7”).text === shortTextOne) {
// if currently displaying short text, display the full text
$w(“#text7”).text = fullTextOne;
$w(“#button1”).label = “weniger anzeigen”;
} else {
// if currently displaying full text, display the short text
$w(“#text7”).text = shortTextOne;
$w(“#button1”).label = “mehr lesen…”;
}

$w.onReady( function () {
const shortTextLength = 617;
// read the full text and store it in the fullText variable
fullTextTwo = $w(“#text3”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextTwo = fullText.substr(0, shortTextLength);
// set the contents of the text element to be the short text
$w(“#text3”).text = shortTextTwo;
//TODO: write your page related code here…

});

export function button5_click(event, $w) {
// display the full text
// check the contents of the text element
if ($w(“#text3”).text === shortTextTwo) {
// if currently displaying short text, display the full text
$w(“#text3”).text = fullTextTwo;
$w(“#button5”).label = “weniger anzeigen”;
} else {
// if currently displaying full text, display the short text
$w(“#text3”).text = shortTextTwo;
$w(“#button5”).label = “mehr lesen…”;
}

4

Make sure that your code is complete and not missing any lines or pieces of code out.

Check the tutorial for more info

Like this line where you have:

 shortTextOne = fullText.substr(0, shortTextLength);

and it should be:

 shortText = fullText.substr(0, shortTextLength) + "...";

Plus, also read what Andreas has already posted above too as it is very important to implement in your code: “You also have two onReady functions in your page which is wrong, make them one and define inside that one.”

You can have onReady with a export function in your code, however you can’t then have another onReady and export function underneath it, you have to combine the two of them into one onReady with the export function set underneath it.

Code for the “Show More/Show Less” Toggle Button:

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;  // you can change this number
// 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) { //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";
}
}
5

Something like this, however don’t blame me if it contains errors!

let fullTextOne; // variable to hold the full text
let shortTextOne; // variable to hold the short version of the text
let fullTextTwo; // variable to hold the full text
let shortTextTwo; // variable to hold the short version of the text

// Besuchen Sie für die komplette API-Dokumentation einschließlich Codebeispielen http://wix.to/94BuAAs
// how many characters to include in the shortened version
$w.onReady(function () {
const shortTextOneLength = 668;
// read the full text and store it in the fullTextOne variable
fullTextOne = $w("#text7").text;
// grab the number of characters defined in shortTextOneLength and store them in the shortTextOne variable
shortTextOne = fullTextOne.substr(0, shortTextOneLength)  + "..."; 
// set the contents of the text element to be the short text
$w("#text7").text = shortTextOne;
//TODO: write your page related code here...

const shortTextTwoLength = 617;
// read the full text and store it in the fullTextTwo variable
fullTextTwo = $w("#text3").text;
// grab the number of characters defined in shortTextTwoLength and store them in the shortTextTwo variable
shortTextTwo = fullTextTwo.substr(0, shortTextTwoLength)  + "..."; 
// set the contents of the text element to be the short text
$w("#text3").text = shortTextTwo;
//TODO: write your page related code here...
});

export function button1_click(event, $w) {
// display the full text
// check the contents of the text element 
if ($w("#text7").text === shortTextOne) {
// if currently displaying short text, display the full text
$w("#text7").text = fullTextOne;
$w("#button1").label = "weniger anzeigen"; 
} else {
// if currently displaying full text, display the short text
$w("#text7").text = shortTextOne;
$w("#button1").label = "mehr lesen...";
}

export function button5_click(event, $w) {
// display the full text
// check the contents of the text element 
if ($w("#text3").text === shortTextTwo) {
// if currently displaying short text, display the full text
$w("#text3").text = fullTextTwo;
$w("#button5").label = "weniger anzeigen"; 
} else {
// if currently displaying full text, display the short text
$w("#text3").text = shortTextTwo;
$w("#button5").label = "mehr lesen...";
}
}
6

Hello Whiskey

Thank you for your Ideas.

The +“…” is not necessary, this defines just how the break will be done after the amount of characters of the short text. So this does not cause the error.

With your proposal, my problem isn’t solved yet. I still have the error “Import and export may only appear on top level” for my second export function for the button5. What does that mean and how can I correct? Anyone?

7

Thanks everyone !
It’s work for me but I have the message : "Loading the code for the Consultations page. To debug this code, open hclrx.js in Developer Tools. "

Maybe I make a mistake in the code…?

let fullTextOne = “#text39”; // variable to hold the full text
let shortTextOne = “#text39”; // variable to hold the short version of the text
let fullTextTwo = “#text40”; // variable to hold the full text
let shortTextTwo = “#text40”; // variable to hold the short version of the text

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () { // how many characters to include in the shortened version
const shortTextOneLength = 25;
// read the full text and store it in the fullText variable
fullTextOne = $w(“#text39”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextOne = fullTextOne.substr(0, shortTextOneLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text39”).text = shortTextOne;

const shortTextTwoLength = 30;
// read the full text and store it in the fullText variable
fullTextTwo = $w(“#text40”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextTwo = fullTextTwo.substr(0, shortTextTwoLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text40”).text = shortTextTwo;

});

export function button7_click(event) { // check the contents of the text element
if ($w(“#text39”).text === shortTextOne) {
// if currently displaying short text, display the full text
$w(“#text39”).text = fullTextOne;
$w(“#button7”).label = “Voir moins”;
} else {
// if currently displaying full text, display the short text
$w(“#text39”).text = shortTextOne;
$w(“#button7”).label = “Voir plus”;
}

}
export function button8_click(event) { // check the contents of the text element
if ($w(“#text40”).text === shortTextTwo) {
// if currently displaying short text, display the full text
$w(“#text40”).text = fullTextTwo;
$w(“#button8”).label = “Voir moins”;
} else {
// if currently displaying full text, display the short text
$w(“#text40”).text = shortTextTwo;
$w(“#button8”).label = “Voir plus”;
} //Add your code for this event here:
}

8

Hey guys. I have a similar problem where i cannot seem to add multiple diverse buttons in the same page.
Currently with this code its changing my text1 and text2 both to text 1 when i go to preview mode!

I am new to this stuff and really dont know where to look!

Thanks

A x

Here is my code:

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {// how many characters to include in the shortened version
const shortTextLength = 1004;
// read the full text and store it in the fullText variable
fullText = $w(“#text1”).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(“#text1”).text = shortText;
//TODO: write your page related code here…
});
export function Showmore(event) {
//Add your code for this event here: // display the full text
$w(“#text1”).text = fullText;
// collapse the button
$w(“#button1”).collapse();
}
export function box7_click(event) {
//Add your code for this event here:
}
export function button1_click_1(event) {
//Add your code for this event here: // display the full text
$w(“#text1”).text = fullText;
// collapse the button
$w(“#button1”).collapse();
}
export function text1_click(event) {// 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(“#text2”).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(“#text2”).text = shortText;// display the full text
}
export function button2_click(event) {// display the full text
$w(“#text2”).text = fullText;
// collapse the button
$w(“#button2”).collapse();
//Add your code for this event here:
}

9

Sorry I meant to say that when I click show more button on Text 2, it changes to Text1 but not unless I dont click

10

First of all please add your post as a new forum post rather than add it to an old existing post.

Secondly, please read the forum guidelines and make sure that you search before posting and add your code in a code block as well.

As for your code, you are not adding the short and full texts for each of your different show more sections as clearly stated on previous replies on this page.

Hey there!

You have defined one variable called fullText and one shortText and you use that in both click events so that is why the same text is being displayed.


let fullTextOne; // variable to hold the full text
let shortTextOne; // variable to hold the short version of the text
let fullTextTwo; // variable to hold the full text
let shortTextTwo; // variable to hold the short version of the text

This post will now be closed and if you need more help with this then add a new forum post.