Creating Show more buttons

Ask the community
,
1

I’m new to using Six and have two questions related to Show more buttons. When you add more than one Show more toggle on/off to a page:

  1. Can you have multiple definitions of short text?
  2. Can you just copy the first button to create additional buttons and then just change the Text# and Button# or how do you do it?
    Every time I try to add additional buttons to different text elements.things get screwed up but I don’t know what I’m doing wrong.
2

If you are doing just one of the show more and using this tutorial:
https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link

Then the code is easy as shown below:

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
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
3

The trouble comes when you want to add more than just the one as if you just copy and paste the code then you also have two onReady functions in your page which is wrong, you will need to make them one and define inside that one."

Plus, you have defined one variable called fullText and one shortText and if you just copy and paste the code, then you will use the same variable in all your function click events.

So you need to change the fullText and shortText as such
let fullTextOne = “”;
let shortTextOne = “”;
let fullTextTwo = “”;

and in onReady
fullTextOne = $w(" # myTextElement1").text;
fullTextTwo = $w(" # myTextElement2").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.

So you will need to setup your code something like this, however please note that this might not be correct and may contain 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 = 40; // you can change this number
// read the full text and store it in the fullText variable
fullTextOne = $w("#myTextElement1").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("#myTextElement1").text = shortTextOne;

// how many characters to include in the shortened version
const shortTextTwoLength = 40; // you can change this number
// read the full text and store it in the fullText variable
fullTextTwo = $w("#myTextElement2").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("#myTextElement2").text = shortTextTwo;
});

export function mybutton1_click(event, $w) { //make sure you have added the onClick event in properties
// display the full text
$w("#myTextElement1").text = fullTextOne;
// collapse the button
$w("#myButton1").collapse();
}

export function mybutton2_click(event, $w) { //make sure you have added the onClick event in properties
// display the full text
$w("#myTextElement2").text = fullTextTwo;
// collapse the button
$w("#myButton2").collapse();
}
}