The problems are 2: when I preview my page, the text “I would like to start my story by…” is completely shown (even if only the first 40 characters should be visible) and when I click on the “Show more” button nothing happens. In the editor view, the platform doesn’t signal me any errors, whereas when I preview it, it shows me 2 errors…I also tried to publish it but nothing changes as well.
Here the code (copied from the tutorial):
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
// 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(“#text70”).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(“#text70”).text = shortText;
export function button1_click(event) {
//Add your code for this event here:
$w(“#text70”).text = fullText;
// collapse the button
$w(“#button1”).collapse();
}
I am very new to coding and this is not the first time I struggle with WIX. Of course, I am also open to other ways to reach my objective here.
If anyone could help me, I would be very grateful!
Make sure that your code is complete and not missing any lines out.
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; // you can change this number
// 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 you have added the onClick event in properties
// display the full text
$w("#myTextElement").text = fullText;
// collapse the button
$w("#myButton").collapse();
}
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; // you can change this number
// 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 you have added 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";
}
}
Hi givemeawhisky! Thank you very much for the reply and the help! Above all, thanks a lot because with your code works perfectly! After redoing through my code, the error was that I was missing this line): $w.onReady(function () {
Now, my next try will be having a background box to that text which will be able to modify its height according to the length of the text (small box when the text is “short” and bigger box when my text is “full”. Therefore, by clicking on “show more” button, not only the text expands but also the box which contains it expands as well).
Yep, we’ve all had that problem of checking and reading code over and over, just to find out that we’ve missed out one line!
As for the background, I would just try adding a box and design it as you wish and then attach the text and button to that box. Basically, just drag the text and button inside the new box until it goes blue and says something like attach to box.
Then in theory, as they are all grouped together then when the text is at full text length it should expand as the text box pushes down the height, with the reverse being true for when going to short text view.
@givemeawhisky
Thank you for the help.
But i have tried this exact code with my page at no avail.
no errors are shown before, during or after loading. Just the 40 characters of the short text and the button.
Clicking the button does nothing.
Any help would be greatly appreciated.
Help! I have tried to copy the code above 100% but I can’t get it to work on my page.
Can you see anything wrong with my code? I feel like my head is going to explode.
Thank you!
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 = 83; // you can change this number
// read the full text and store it in the fullText variable
fullText = $w(“#text50”).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(“#text50”).text = shortText;
});
export function button1_click_1(event, $w) { //make sure you have added the onClick event in properties
// check the contents of the text element if ($w(“#text50”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text50”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text50”).text = shortText;
$w(“#button1”).label = “Show more”;
}
}
This does’nt seems to work for me: Do we have to turn on “onReady” event handler for dynamic dataset in properties? I tried that too but dint work. Please help.
let fullText; // variable to hold the full text let shortText; // variable to hold the short version of the text
$w.onReady( function () {
$w(“#dynamicDataset”).onReady( function () {
// how many characters to include in the shortened version const shortTextLength = 40;
// set the fullText variable to be the text from the collection
fullText = $w(‘#dynamicDataset’).getCurrentItem().textField;
// if no text to display, collapse the text element and the button if (!fullText) {
$w(‘#texttitledescription’).collapse();
$w(‘#showmorebutton’).collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button if (fullText.length <= shortTextLength) {
$w(‘#texttitledescription’).text = fullText;
$w(‘#showmorebutton’).collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(‘#texttitledescription’).text = shortText;
}
}
});
export function showmorebutton_click(event) { //make sure you have added the onClick event in properties
// check the contents of the text element if ($w(“#texttitledescription”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#texttitledescription”).text = fullText;
$w(“#showmorebutton”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#texttitledescription”).text = shortText;
$w(“#showmorebutton”).label = “Show more”;
}
}
@givemeawhisky I din’t change texFeild name which I corrected now. But still code din’t work. Have some parsing error on onClick button event. The red indicator on it says Parsing error ‘import’ and ‘export’ may only appear at top level.
The tutorial should work for you either if you are using static text or dynamic text option.
However, please check that you don’t have any other code elsewhere on your page that is affecting this code.
If you have any code above the let full text first line then delete it, same with if you have any code following the last ‘}’ in the last line of this tutorial’s code.
In other words you should be starting with a blank page code screen, delete everything from it first of all before entering your code.
The code you need to use is this:
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
$w("#dynamicDataset").onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 40;
// set the fullText variable to be the text from the collection
fullText = $w('#dynamicDataset').getCurrentItem().textField;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w('#myTextElement').collapse();
$w('#myButton').collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the "Show More" button
if (fullText.length <= shortTextLength) {
$w('#myTextElement').text = fullText;
$w('#myButton').collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + "...";
$w('#myTextElement').text = shortText;
}
}
});
export function mybutton_click(event, $w) { //making sure that you have added 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";
}
}
The only thing that you need to do with the code is to change the text field and the dataset name and the elements names to the id names of your own used elements.
As well as adding the onClick event handler to the button which will give you an additional ‘export function onClick event’ at the end of your code.
So, if you already have this in your code already, then please delete this additional line as you won’t need it.
Hello it doesn’t work for me initially the short text is displayed but then when i press the button it takes me back to homepage
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 = 475;
// read the full text and store it in the fullText variable
fullText = $w("#text5").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("#text5").text = shortText;
});
initially the short text is displayed but then when i press the button it takes me back to homepage
