Hi!
I'am trying to figure out how to add multiple show-more links. I'am not super into code so don't blame me, I tried hahah. This is the code I got so far but issn't working.
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 = 1000;
// read the full text and store it in the fullText variable
fullText = $w("#text6").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("#text6").text = shortText;
});
export function button2_click(event) {
// check the contents of the text element
if ($w("#text6").text === shortText) {
// if currently displaying short text, display the full text
$w("#text6").text = fullText;
$w("#button2").label = "Minder";
} else {
// if currently displaying full text, display the short text
$w("#text6").text = shortText;
$w("#button2").label = "Lees meer...";
}
}
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 1000;
// 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;
});
export function button1_click(event) {
// check the contents of the text element
if ($w("#text1").text === shortText) {
// if currently displaying short text, display the full text
$w("#text1").text = fullText;
$w("#button1").label = "Minder";
} else {
// if currently displaying full text, display the short text
$w("#text1").text = shortText;
$w("#button1").label = "Lees meer...";
}
}
I found this link: https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link
which works perfectly with one text and one button but when I copy the code to make another show-more link (for #text6 and #button2) the text box (#text6) shows the content of text1 after clicking the "Lees meer..." button (#button2).
Ive found my own solution that doesnt require any html to keep the formatting, and uses significantly less code. I commented my solution on a separate thread:
https://www.wix.com/corvid/forum/main/comment/5fc5747545cdb100aff49f9b
Hope this helps!
Hello, I believe the same problem as written above. On the basis of the code examples, I already understand a lot. What I still have as a problem, the buttons created remain in the middle of the page. I have no idea why that is? Have the text translated with Google. My english is not enough for the topic. Maybe someone can answer in German?
Hi there! Had the same problem and found a solution! This code is for 3 different texts in the same page. Hope it helps!
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 = 113; // you can change this number // read the full text and store it in the fullText variable fullText = $w("#text5").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("#text5").text = shortText; }); export function button1_click(event, $w) { //make sure you have added the onClick event in properties // check the contents of the text element if ($w("#text5").text === shortText) { // if currently displaying short text, display the full text $w("#text5").text = fullText; $w("#button1").label = "Mostrar menos"; } else { // if currently displaying full text, display the short text $w("#text5").text = shortText; $w("#button1").label = "Seguir leyendo"; } } let fullTextOne; // variable to hold the full text let shortTextOne; // variable to hold the short version of the text $w.onReady(function () { // how many characters to include in the shortened version const shortTextOneLength = 200; // you can change this number // read the full text and store it in the fullText variable fullTextOne = $w("#text3").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("#text3").text = shortTextOne; }); export function button2_click(event, $w) { //make sure you have added the onClick event in properties // check the contents of the text element if ($w("#text3").text === shortTextOne) { // if currently displaying short text, display the full text $w("#text3").text = fullTextOne; $w("#button2").label = "Mostrar menos"; } else { // if currently displaying full text, display the short text $w("#text3").text = shortTextOne; $w("#button2").label = "Seguir leyendo"; } } let fullTextTwo; // variable to hold the full text let shortTextTwo; // variable to hold the short version of the text $w.onReady(function () { // how many characters to include in the shortened version const shortTextTwoLength = 203; // you can change this number // read the full text and store it in the fullText variable fullTextTwo = $w("#text1").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("#text1").text = shortTextTwo; }); export function button3_click_1 (event, $w) { //make sure you have added the onClick event in properties // check the contents of the text element if ($w("#text1").text === shortTextTwo) { // if currently displaying short text, display the full text $w("#text1").text = fullTextTwo; $w("#button3").label = "Mostrar menos"; } else { // if currently displaying full text, display the short text $w("#text1").text = shortTextTwo; $w("#button3").label = "Seguir leyendo"; } }
Hello, can anyone help please? I tried the advices above, but it is not working for me.
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 $w.onReady(function () { // how many characters to include in the shortened version const shortTextOneLength = 1000; // read the full text and store it in the fullTextOne variable fullTextOne = $w("#text6").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("#text6").text = shortTextOne; // how many characters to include in the shortened version const shortTextTwoLength = 1000; // read the full text and store it in the fullTextTwo variable fullTextTwo = $w("#text1").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("#text1").text = shortTextTwo; }); export function button2_click(event) { // check the contents of the text element if ($w("#text6").text === shortTextOne) { // if currently displaying short text, display the full text $w("#text6").text = fullTextOne; $w("#button2").label = "Minder"; } else { // if currently displaying full text, display the short text $w("#text6").text = shortTextOne; $w("#button2").label = "Lees meer..."; } export function button1_click(event) { // check the contents of the text element if ($w("#text1").text === shortTextTwo) { // if currently displaying short text, display the full text $w("#text1").text = fullTextTwo; $w("#button1").label = "Minder"; } else { // if currently displaying full text, display the short text $w("#text1").text = shortTextTwo; $w("#button1").label = "Lees meer..."; } }
Make sure that your code is complete and not missing any lines or pieces of code out.
Check the tutorial for more info
Plus, also read what Andreas has already posted in another forum post about this too as it is very important to implement in your code:
"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..."
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"; } }
I'm also having the same problem, I spent all day trying to figure out the problem but no results :/