"Show More/Show Less" Toggle Button

I have a page with several long texts and toggle buttons.
My problem is that due to my text lengths, the buttons started to appear really far away from the shortened text that is actually displayed on the page before using the button, and I have no idea how to fix it. Just some of the buttons are like that, other ones are fine but they’re also not exactly where they should be. I want them to be at the end of the shortened text instead of appearing at the end of the long text, if that makes sense. I’m not sure if it’s an issue with the code, but here is a section of one of the texts that got messed up:

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 = 90;
// read the full text and store it in the fullText variable
fullText = $w(“#text26”).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(“#text26”).text = shortText;

});

export function button1_click(event) {
if ($w(“#text26”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text26”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text26”).text = shortText;
$w(“#button1”).label = “Show more”;
}
}

Does anyone have the same problem?
Thanks in advance.

Have a look at this previous forum post as I think it applies to what you are talking about.
https://www.wix.com/corvid/forum/community-discussion/expandable-text-box-w-show-more-button-issue

Yes, exactly. I didn’t find anything about it so far, thank you very much!

But unfortunately, these tips are not working out for my page. So, if anyone has any other suggestions, I’d be really thankful.

Okay, I was thinking that it would help you fix it as I’ve checked your code and it looks all fine for the show more/show less option.

Quick question, maybe worth giving it a quick try with the show more button option instead and see if that is a more viable option for your website.

Although, note with the show more only button, that when you use this option and click on the show more button, then the button will not be shown when it is displaying the full text version.

https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
The “Show More” button disappears once the full text is displayed.

If you can’t get the answer to fix this, then you might want to try using collapse elements instead:
https://www.wix.com/corvid/example/collapse-elements
https://codequeen.wixsite.com/double-collapse/double-collapse-code
https://www.youtube.com/watch?v=HmTkf5af0NE - video for Nayeli (Code Queen) tutorial above.