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 = 240;
// read the full text and store it in the fullText variable
fullText = $w("#text328").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("#text328").text = shortText;
});
export function button25_click(event) {
// display the full text and collapse the button
$w("#text328").text = fullText;
$w("#button25").collapse();
}
export function button26_click(event) { // check the contents of the text element if ($w("#text328").text === shortText) { // if currently displaying short text, display the full text $w("#text328").text = fullText; $w("#button25").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text328").text = shortText; $w("#button25").label = "Show more"; } }
Hi well i had a typo while pasting the code to the forum but my code looks like below. I am sure its all correct but i might be actually missing something. Could you please take a look again at my code and help ?
I am having the exact problem and struggling since a few hours with this. I have followed the tutorial at
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link#part-3-controlling-the-button
Show More code Works
Show More / Show Less code does not work
Below is my code :
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; // read the full text and store it in the fullText variable fullText = $w("#text27").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("#text27").text = shortText; }); export function button1_click(event, $w) { if ($w("#text27").text === shortText) { // if currently displaying short text, display the full text $w("#text27").text = fullText; $w("#button1").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text27").text = shortText; $w("#button1").label = "Show more"; } }
I also tried a variation of export function as below and even that doesnot work export function button1_click(event, $w) { if ($w("#text27").text === shortText) { // if currently displaying short text, display the full text $w("#text27").text = fullText; $w("#button1").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text27").text = shortText; $w("#button1").label = "Show more"; }
}
Is there a typo in the code in the tutorial page, because i have seen multiple people reporting the same issue that show more works but show more / show less doesn't work. Could you please help whats wrong with my code above ??
For the gap between the text and the button, simply move the button element up to the bottom of the text element when you are previewing it in the short text option.
As for your code, then you are missing part of your code....
if ($w("text328").text === shortText) { // you are missing the # from in front of your text element
So I copied your code for the 'show more/less' button and added the numbers attached to the button and text element. It does not work.
a) it does show 240 characters with a huge gap before the 'show more' label
b) I cannot expand the text nor collapse
the only code that functions is the show more code.
Here you see what I have done:
//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 = 240; // read the full text and store it in the fullText variable fullText = $w("#text328").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("#text328").text = shortText; }); export function mybutton_click(event, $w) { //make sure that you add the onClick event in properties // check the contents of the text element if ($w("text328").text === shortText) { // if currently displaying short text, display the full text $w("#text328").text = fullText; $w("#button25").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text328").text = shortText; $w("#button25").label = "Show more"; } }
Ohhhhh, I get it. Sorry, this is not my mother tongue!!! Now I get it! Thank you so much :)
Sorry but my code examples for you are correct and you are still mixing up the two different options of the 'show more' button and the 'show more/show less' toggle.
Plus, of course it clearly won't work with the 'show more/show less' toggle as you are still insisting on running the 'show more' button first in your code!
Basically, just make up your mind of which option you want to use on your website page, either 'show more' or show more/show less' and go with that option only instead of trying to still mix the two together which obviously will not work and make the code fail as you have found out for yourself.
Here is Wix's own tutorial which clearly explains it all and shows it correctly too if you still intend to think your code is correct:
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
Good luck with your coding.
Thanks so much for trying to help but yours didn't work at all. I replaced as required the myButton to button25 throughout.
The following worked so far best except it won't show the "show less" button and leave a BIG gap after the set short text (240 characters).
Here is what I have done:
//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 = 240; // read the full text and store it in the fullText variable fullText = $w("#text328").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("#text328").text = shortText; }); export function button25_click(event) { // display the full text and collapse the button $w("#text328").text = fullText; $w("#button25").collapse(); } export function mybutton_click(event, $w) { //make sure that you add the onClick event in properties // check the contents of the text element if ($w("#text328").text === shortText) { // if currently displaying short text, display the full text $w("#text328").text = fullText; $w("#myButton25").label = "Show less"; } else { // if currently displaying full text, display the short text $w("#text328").text = shortText; $w("#myButton25").label = "Show more"; } }
//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; // 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 that you add 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"; } }
//Code for the "Show More" 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; // 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 that you add the onClick event in properties // display the full text $w("#myTextElement").text = fullText; // collapse the button $w("#myButton").collapse(); }
Seems to me like you are mixing up the two versions as you can't do the button 25 and button 26 together.
Check your code again.