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.
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.
But unfortunately, these tips are not working out for my page. So, if anyone has any other suggestions, I'd be really thankful.
Yes, exactly. I didn't find anything about it so far, thank you very much!
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