Adding several expandable Text Boxes with Read More Links

[cmcd]

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”;
}
}

[J.D]

@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).

[yisrael-wix]

You bring up a good point - binding to the functions makes the code less portable. In some circumstances I choose to $(‘#button’).on.Click() for sake of portability. The problem that I find it less readable. So it comes down to what’s better: more readable with a chance of forgetting to bind the handler, or more portable but not as readable.

The tutorial is actually not mine, and not new. But if followed closely it works.

[J.D]

Makes sense. But every few days someone asks this specific question regarding this tutorial. So apparently something is not clear enough somewhere.

[J.D]

@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;
        }
    })
})

[givemeawhisky]

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.

[givemeawhisky]

So yes the tutorial is fine for the normal user who only wants to use the tutorial the one time and have it on their page simply as this:

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";
}
} 

However, when you want to add multiple versions of the textboxes then your code starts to elongate and ends up looking something like this:

let fullTextOne = ""; // variable to hold the full text
let shortTextOne = ""; // variable to hold the short version of the text
let fullTextTwo = ""; // variable to hold the full text
let shortTextTwo = ""; // variable to hold the short version of the text

$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextOneLength = 40;
// read the full text and store it in the fullTextOne variable
fullTextOne = $w("#text1").text;
// grab the number of characters defined in shortTextOneLength and store them in the shortTextOne variable
shortTextOne = fullTextOne.substr(0, shortTextOneLength) + "...";
// set the contents of the text element to be the short text
$w("#text1").text = shortTextOne;

// how many characters to include in the shortened version
const shortTextTwoLength = 40;
// read the full text and store it in the fullTextTwo variable
fullTextTwo = $w("#text2").text;
// grab the number of characters defined in shortTextTwoLength and store them in the shortTextTwo variable
shortTextTwo = fullTextTwo.substr(0, shortTextTwoLength) + "...";
// set the contents of the text element to be the short text
$w("#text2").text = shortTextTwo;
});

export function button1_click(event) {
//make sure that you add the onClick event in properties 
// check the contents of the text element 
if ($w("#text1").text === shortTextOne) {
// if currently displaying short text, display the full text
$w("#text1").text = fullTextOne;
$w("#button1").label = "Show Less";  
} else {
// if currently displaying full text, display the short text
$w("#text1").text = shortTextOne;
$w("#button1").label = "Show More";
}

export function button2_click(event) {
//make sure that you add the onClick event in properties 
// check the contents of the text element 
if ($w("#text2").text === shortTextTwo) {
// if currently displaying short text, display the full text
$w("#text2").text = fullTextTwo;
$w("#button2").label = "Show Less";
} else {
// if currently displaying full text, display the short text
$w("#text2").text = shortTextTwo;
$w("#button2").label = "Show More";
}
}

And this is where I would much prefer to use something like the code J.D. posted as it is less code to have to use and a simpler option to add the various other textboxes and buttons etc.

[cmcd]

Thank you, it works!

[J.D]

Maybe you’re right and my code seems a little bit complicated (even though it’s really quite simple).
I guess the only way to make it super-simple is to add this feature to the editor itself. (but I hope the dev team will never waste time on that instead of expanding the api abilities).

[givemeawhisky]

Well the next time that I have the need to do this more/less option, then I am definitely going to use your code that you posted already, as I much prefer the simpler way of coding the const text sections in yours.

However, yes I would rather Wix use their resources much more to open up more API’s for people to use and as you’ve said, expand more on the existing API’s and their functions already.

[yisrael-wix]

Nice! Simple and elegant.

I agree this is pretty simple, but a beginner would have a much harder time understanding this.