"show more" code is changing my text

Ask the community
, ,
1

Hey guys,

So basically I have a couple of paragraphs on my home page. They are too long, so I have decided to add functional “show more” buttons to them. They work like a charm, however when I click them, one of the paragraphs turn into the other one. Thus, I end up having a repeated paragraph on my site under different headings. I have pasted the code below and would love some help in this. 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 = 367;
// read the full text and store it in the fullText variable
fullText = $w(“#whypiltx”).text; fullText = $w(‘#orctytx’).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(‘#whypiltx’).text = shortText;$w(‘#orctytx’).text = shortText;
});

export function button1_click(event) {
if ($w(‘#whypiltx’).text === shortText) {
// if currently displaying short text, display the full text
$w(‘#whypiltx’).text = fullText;
$w(‘#button1’).label = “show less”;
} else {
// if currently displaying full text, display the short text
$w(‘#whypiltx’).text = shortText;
$w(‘#button1’).label = “show more”;
}
//Add your code for this event here:
}

export function button2_click(event) { if ($w(‘#orctytx’).text === shortText) {
// if currently displaying short text, display the full text
$w(‘#orctytx’).text = fullText;
$w(‘#button2’).label = “show less”;
} else {
// if currently displaying full text, display the short text
$w(‘#orctytx’).text = shortText;
$w(‘#button2’).label = “show more”;
}
//Add your code for this event here:
}

2

Hi,
Can you please send us the site URL so that we can better understand what’s the issue? A video of the issue can be useful too. You can use screencast for that purpose. Simply recreate the issue while recording the steps and add the screencast.com URL to your response.

Thanks,
Tal.

3

Hello
I’m having the same issue with a few other quirks.
site: https://www.sprangz.com/afro-care-tips
I have a Chromebook and not looking to add more apps so I hope description is enough…

I didn’t change anything substantive in the code and only used Corvid on this one page on four text boxes.

1st paragraph (text13, button1)
“Read More” button click changes text13 into text8 shortText and button remains as “Read More”; 2nd click expands text8, “Show Less” button click collapses text8 & text13 does not return

2nd paragraph (text12, button8)
All buttons coded as “Read More” but this paragraph says “Show More” and button click does not expand paragraph

3rd paragraph (text10, button6)
Same issue as 1st paragraph, text10 is replaced by text8… text10 does not return

4th paragraph (text8, button7)
Same issue as 2nd paragraph and button will not attach to shortText/text box (large space on page) but button click will expand and collapse correct text8

I checked the page code and each section looks identical and text/button IDs are correct so I have no idea how to fix this.

Thanks for your help!

let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
 // how many characters to include in the shortened version
 const shortTextLength = 452;
 // read the full text and store it in the fullText variable
    fullText = $w("#text13").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("#text13").text = shortText;
 //TODO: write your page related code here...
});
export function button1_click(event) {
 // check the contents of the text element 
 if ($w("#text13").text === shortText) {
 // if currently displaying short text, display the full text
        $w("#text13").text = fullText;
        $w("#button1").label = "SHOW LESS";
    } else {
 // if currently displaying full text, display the short text
        $w("#text13").text = shortText;
        $w("#button1").label = "READ MORE";
    }} 
 //Add your code for this event here: 
 
    $w.onReady(function () {
 // how many characters to include in the shortened version
 const shortTextLength = 451;
 // read the full text and store it in the fullText variable
    fullText = $w("#text12").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("#text12").text = shortText;
 //TODO: write your page related code here...
});
export function button8_click(event) {
 // check the contents of the text element 
 if ($w("#text12").text === shortText) {
 // if currently displaying short text, display the full text
        $w("#text12").text = fullText;
        $w("#button8").label = "SHOW LESS";
    } else {
 // if currently displaying full text, display the short text
        $w("#text12").text = shortText;
        $w("#button8").label = "READ MORE";
    }} 
 //Add your code for this event here: 
 
    $w.onReady(function () {
 // how many characters to include in the shortened version
 const shortTextLength = 607;
 // read the full text and store it in the fullText variable
        fullText = $w("#text10").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("#text10").text = shortText;
 //TODO: write your page related code here...
    });
 export function button6_click(event) {
 // check the contents of the text element 
 if ($w("#text10").text === shortText) {
 // if currently displaying short text, display the full text
            $w("#text10").text = fullText;
            $w("#button6").label = "SHOW LESS";
    } else {
 // if currently displaying full text, display the short text
            $w("#text10").text = shortText;
            $w("#button6").label = "READ MORE";
    }}

    $w.onReady(function () {
 // how many characters to include in the shortened version
 const shortTextLength = 390;
 // read the full text and store it in the fullText variable
        fullText = $w("#text8").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("#text8").text = shortText;
 //TODO: write your page related code here...
    });
 export function button7_click(event) {
 // check the contents of the text element 
 if ($w("#text8").text === shortText) {
 // if currently displaying short text, display the full text
            $w("#text8").text = fullText;
            $w("#button7").label = "SHOW LESS";
    } else {
 // if currently displaying full text, display the short text
            $w("#text8").text = shortText;
            $w("#button7").label = "READ MORE";
    }}
4

@cynthiarf1970 The .text method does not retain formatting except for the very first character’s. If you’d like it to retain formatting, you’ll need to use the .html property:
https://www.wix.com/corvid/reference/$w.Text.html#html