Creating multiple show-more/show-less links

Ask the community
, ,
1

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

1 Like
2

I’m also having the same problem, I spent all day trying to figure out the problem but no results :confused:

3

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";
}
}
4

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...";
}
}
5

Hello, can anyone help please? I tried the advices above, but it is not working for me.

6

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

7

Is that not just the same as Yevhen (Wix Mod) posted from 1st August 2018 :wink:
https://www.wix.com/corvid/forum/community-discussion/multiple-expandable-text-boxes-error

Although the code works perfectly with one expandable text box - it seems to fail when another is added to the page.
It fails because the same variables fullText and shortText are used for different expandable text boxes. Create a set of the variables for every expandable text box:

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 = 30;
 // read the full text and store it in the fullText1 variable
    fullText1 = $w("#text17").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("#text17").text = shortText1;

});

export function button6_click(event, $w) {
 // check the contents of the text element 
 if ($w("#text17").text === shortText1) {
 // if currently displaying short text, display the full text
        $w("#text17").text = fullText1;
        $w("#button6").label = "Show Less";
    } else {
 // if currently displaying full text, display the short text
        $w("#text17").text = shortText1;
        $w("#button6").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 = 40;
 // read the full text and store it in the fullText2 variable
    fullText2 = $w("#text22").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("#text22").text = shortText2;

});

export function button7_click(event, $w) {
 if ($w("#text22").text === shortText2) {
 // if currently displaying short text, display the full text
        $w("#text22").text = fullText2;
        $w("#button7").label = "Show less";
    } else {
 // if currently displaying full text, display the short text
        $w("#text22").text = shortText2;
        $w("#button7").label = "Show more";
    }
}
8

If you want to do it even easier, then simply have a container box on your page and have your text and show more button attached to that for each of your show more, show less parts.
So one container box for each show more/show less text.

So you simply have this on your page.

THE ELEMENTS

The Page
Container Boxes:​
Box Container: #box1
Text Element: #text1
Button: #button1
Attach a text element and button to your box container.

THE CODE

Page Code
$w.onReady(function () {
let length = $w(“#text1”).html.length;
let long = $w(“#text1”).html;
let short = $w(“#text1”).html.substr(0, 200) + “…”; // Set summary text length //
​
$w(“#text1”).html = short;
​
$w(“#button1”).onClick((event, $w) => {
​
if (length > 200 && $w(“#text1”).html.length < length) {
$w(“#text1”).html = long;
$w(“#button1”).label = “Show Less”;
} else if (length > 200 && $w(“#text1”).html.length >= length) {
$w(“#text1”).html = short;
$w(“#button1”).label = “Read More”;
}
});
});

9

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?

10

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!