I cannot seem to be able to get my read more button to show the rest of the text and not be so far away from the box. Can anybody help? Been on the phone to Wix for 1h and they told me to come here.
A
Have you followed the tutorial correctly?
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
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
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) {
//making sure that you have added the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
@azharaonthenet , that’s happening because you put the full text in the text-box (via the editor) and then when you push the short text pragmatically, the element below it stays where it is.
You should put the short-text (or even no text) in the text-box, and then assign the full text when it’s needed.
I JD yeah I did follow correctly, but I am new to this world so could have easily made a mistake.
I dont understand what you mean by assigning the full text when needed.
Will check the other forum 
Thanks
@azharaonthenet this error is because lines 6 and line 10 that are not wrapped in
$w.onReady( function() {
//lines 6-10 should be here
})
also instead of line 6 use this code:
fullText = “here’s my full text my full text my full text” //use your actual full text
After you make the change, you can leave lines 6-8 above the onReady(), and only keep line 10 inside the onReady()
@jonatandor35 I do not understand what you mean by that JD
You have mixed up the code for the show more button and the show more/show less toggle.
You have to choose between the button or the toggle, you can’t have both in the same code.
Plus, as J.D. says, you have left out the page’s onReady function itself too.
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () { // <=== You missed out this line here
// how many characters to include in the shortened version
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();
}
@givemeawhisky I think you’re missing the problem that bothers many users here.
The problem is the relations between the textbox and the element below:
The thing is that when a textbox expands it pushes down the next element and moves it from its original location, and that is good. However, when a textbox get shortened, it sometimes fails to pull up the element below and it stays in its original location creating an unwanted gap between the textbox and the next element.
To resolve that, II suggested to put a minimal text in the textbox (as a placeholder) and assign the actual texts by code only so the next element will never have to be pulled up from its original location (onlt to be psuhed down from the original location, which works fine).
In you code, you put the full text inside the textbox (on the editor) and that’s what causes the issue. Try and see.
P.S. that happens probably when another element (somewhere on the page) limits the pull-up. But starting from a very short place-holding text can make it easier to deal with.
Write guys thanks a lot, I will give your advice a go!
The button position has been fixed yay! However when i click the button it wont show the rest of the text.
tried with the both types of code separately.
cheers
Paste your full code here (not a screenshot), and I’ll try to have a look.
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 = 471;
// read the full text and store it in the fullText variable
fullText = $w(“#text3”).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(“#text3”).text = shortText;
});
export function mybutton_click(event, $w) {
// make sure that you add the onClick event in properties
// display the full text
$w(“#text3”).text = fullText;
// collapse the button
$w(“#button1”).collapse();
}
Thank you
You have a line:
fullText = $w("#text3").text;
instead of this line, put this one:
fullText = "fulltext fulltext fulltext ";//put you real full text between the quote marks instead of my "fulltext fulltext fulltext ",
I did so, and it doesn’t work unfortunately
What did happen when you did it? Do you have the same problem ? something else?