Hello,
I am willing to create a page with several expandable text boxes with read more buttons. The texts are static. So far, I managed to create one with the Corvid tutorial, but I don't know where I should add the code for the other text boxes and buttons without disturbing the first one. I created the second text (text55), the second button (button2) and added the code to control it, but I am not sure of where to put the code controlling the second text.
I am very new at this, so thank you for your help!
For now, the code for the page is:
$w.onReady(function () {
//TODO: write your page related code here...
// how many characters to include in the shortened version
const shortTextLength = 900;
// read the full text and store it in the fullText variable
fullText = $w("#text53").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("#text53").text = shortText;
// how many characters to include in the shortened version
// read the full text and store it in the fullText variable
});
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
export function button1_click(event) {
// check the contents of the text element
if ($w("#text53").text === shortText) {
// if currently displaying short text, display the full text
$w("#text53").text = fullText;
$w("#button1").label = "Réduire";
} else {
// if currently displaying full text, display the short text
$w("#text53").text = shortText;
$w("#button1").label = "Lire la suite";
}
}
export function button2_click(event) { //Add your code for this event here: // check the contents of the text element if ($w("#text55").text === shortText) { // if currently displaying short text, display the full text $w("#text55").text = fullText; $w("#button2").label = "Réduire"; } else { // if currently displaying full text, display the short text $w("#text55").text = shortText; $w("#button2").label = "Lire la suite"; } }
@cmcd ,
You can try this one:
//Set texts const texts = [ { //first text details: "text": "some long text some long text", //put your full text here "shortTextLength": 15, //number of characters "buttonId": "button1", // use the propertyId of the expanding button "textboxId": "text1", // use the propertyId of the textbox "defaultText": "fullText" //do you want it to start from full text? }, { //second text details: "text": "other long text other long text other long text", "shortTextLength": 10, "buttonId": "button2", "textboxId": "text2", "defaultText": "shortText" } ]; const shortTxtLabel = "View more"; //the text displayed on the button const fullTxtLabel = "View less"; //<<<<<No need to update anything in the following code >>>>> const numberOfTexts = texts.length; $w.onReady(function () { let buttonSelector = ""; for (let i = 0; i < numberOfTexts; i++) { buttonSelector += `#${texts[i].buttonId},`; if (texts[i].defaultText === "fullText") { $w(`#${texts[i].textboxId}`).text = texts[i].text; $w(`#${texts[i].buttonId}`).label = fullTxtLabel; } else { $w(`#${texts[i].textboxId}`).text = texts[i].text.substring(0, texts[i].shortTextLength); $w(`#${texts[i].buttonId}`).label = shortTxtLabel; } } $w(buttonSelector).onClick((event) => { let relevantText = texts.find(e => e.buttonId === event.target.id); let relevantButton = $w("#" + event.target.id); let relevantTextbox = $w("#" + relevantText.textboxId); if (relevantButton.label === fullTxtLabel) { relevantButton.label = shortTxtLabel; relevantTextbox.text = relevantText.text.substring(0, relevantText.shortTextLength); } else { relevantButton.label = fullTxtLabel; relevantTextbox.text = relevantText.text; } }) })
I am agreeing with both of you on this subject J.D. and Yisrael regarding the tutorial here.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link
Yes I agree perfectly with Yisrael that it is working completely fine if people just followed the tutorial properly and yes J.D. a lot of users simply forget to add the onClick event in the properties panel.
Although for myself, I often see mostly users that have either simply written the code wrongly with parts of it like the lets for example for the short and full text being placed in the middle and not at the top of the code, or simply having used both the show more and the show more/show less all in the same code etc, etc.
However, the code itself is simple and easy to understand for mainly the newer Wix users who are getting into using code on their website. The code that you have suggested J.D., which in turn is a great example and an easier way to add multiple texts too, would be better for the more experienced coder and one that understands code a bit more than the user who is looking originally for a simple tutorial like the one Wix has provided.
The main issue with the tutorial is that it is only setup for being used the once and once only, plus nowhere on that page does it state how to use it multiple times.
If there was another part of the tutorial that listed for users how to add multiple versions of this tutorial by simply adding fullTextOne / shortTextOne and fullTextTwo / shortTextTwo, or getting them to rename the texts like fullText_whisky / shortText_whisky and fullText_wine / shortText_wine.
Get them to repeat those options for their 'const shortTextLengthOne / const shortTextLength_whisky and the export functions for the appropriate buttons to go with the text sections, it be much easier for the standard user to work out what to do originally and not have to come asking for help with this tutorial many a times.
Instead of having to answer them with something similar to this all the time.
"You have defined one variable called fullText and one shortText and you use that in both click events so that is why the same text is being displayed. You also have two onReady functions in your page which is wrong, make them one and define inside that one
let fullTextOne = "";
let shortTextOne = "";
let fullTextTwo = "";
and in onReady
fullTextOne = $w("#text35").text;
fullTextTwo = $w("#text36").text;
And so on..."
However, yes this will make the code longer and longer if they have multiple textboxes that they want to use for the show more/show less toggle or the show more button. So, this in turn would be where you could utilise the code that you posted J.D. as it condenses the text into more manageable option, instead of having to have the multiple adds of shortText.... and fullText.... etc, to all the sections of the code used in the original tutorial.
@Yisrael (Wix) , I think you should change this example, because people always have problems with it. If you use an onClick() function instead of export function, it will save a lot of time (because many people forget to turn the event handler on the properties panel).