Trying to do the show less/more toggle button but the short version does not show.

Discussion Ask a question
, ,
1

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

2

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.

3 
//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();
}
4 
//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";
}
}
5

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

6

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.

7

Ohhhhh, I get it. Sorry, this is not my mother tongue!!! Now I get it! Thank you so much :slight_smile:

8

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

9

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
10

Thanks again. I corrected my mistake and added the # sign where it was missing.

a) it still didn’t work
b) when I added the code below to the suggested code, the text will collapse
c) you cannot move elements in preview mode…at least not on my computer, so the gap between the short text and “show more” is staying
d) it will not show “show less”, there is simply NO button visible when the text is expanded

export function button25_click(event) {
// display the full text and collapse the button
$w(“#text328”).text = fullText;
$w(“#button25”).collapse();
}

11

It seems it has been an ongoing issue for others too…the gap. See posting from August 14, 2018 …
https://www.wix.com/corvid/forum/community-discussion/expandable-text-too-much-space

12

@lbbbarbara

That is because you are still changing the ending of the show more/show less toggle to the code for the show more button.

After changing it you get this result from the tutorial:

Part 3: Controlling the Button

This part of the tutorial presents the code that controls the “Show More” button. You have two options:

  • The “Show More” button disappears once the full text is displayed.

  • The button toggles between “Show more” and “Show less.”

Both options require an onClick event handler.

As for the show more/show less toggle itself, it needs to be right up underneath the text element as shown in the tutorial too.

  • Position the button to be right below the text box so that its top edge is touching the bottom edge of the text element. It should look like the image below.

Also, from the other forum post that you linked, see the reply from Wix Mod Yevhen Pavliuk as it gives you a working answer to fix it.

…I’ve rechecked your site. Your text component has a default height that serves as the minimum height—it cannot shrink more than that even if there’s no content. You can see that by clearing the content of the component…

13

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 ??

14

You have made the typo yourself.

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";
}
}
15
  1. Copy the code below and paste it at the very top of the panel, above any code that appears there.
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

This code defines two global variables, fullText and shortText. fullText will store the full version of the text that will be displayed after your visitor clicks the “Show More” button. shortText will store the version of the text that initially appears on your page (and will be displayed again if you choose to create a toggle button).

16

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 ?

1936×1040 277 KB