Expand / Collapse text on dynamic page *HELP*

Ask the community
,
1

Hi guys,

Hopefully someone may help. I’ve followed the corwiv tutorial “Show more link” to expand and collapse text on a dynaic page.

I’ve got it working BUT the only problem being it’s showing the (I think) HTML code too when you view it. The data it’s collecting is from a fiel that is rich text. Not sure if that is an issue? Here’s the code I’ve used.

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text

$w.onReady( function () {

$w(“#CompanyProfile”).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(‘#CompanyProfile’).getCurrentItem().about;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w(‘#TextExp1’).collapse();
$w(‘#button1’).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(‘#TextExp1’).text = fullText;
$w(‘#button1’).collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(‘#TextExp1’).text = shortText;
}
}
});
});

export function button1_click(event) {
if ($w(“#TextExp1”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#TextExp1”).text = fullText;
$w(“#button1”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#TextExp1”).text = shortText;
$w(“#button1”).label = “Show more”;
}
}

This is the results I get first image collapsed, second expanded text. You can see in the text it shows this

:

2399×692 72.9 KB

1876×1800 504 KB

Help would be so much appreciated guys !!

Tom

2

With this tutorial it is using either the text in the text box that you have typed up yourself or from the text field in your dataset that you have set it up to use.

Now note that this tutorial uses the .text format which will use the formatting that was set in the Editor itself, whether that be for the text in the text box on the page or all the text in the dataset field, which will include all the html codings too.

Regardless of if you choose rich text or text, it will take all your text from the dataset field and show it in the tutorial.

You will need to change the format from text to html so that it shows the html as it is set in the html property itself.

https://support.wix.com/en/article/corvid-about-formatting-text-elements
https://www.wix.com/corvid/reference/$w.Text.html
https://support.wix.com/en/article/corvid-working-with-the-html-element#messaging-1
https://www.wix.com/corvid/forum/community-discussion/database-why-doesn-t-the-rich-text-formatting-hold