Expandable Text Box

Ask the community
, ,
1

Does anyone have the full code for an expandable text box? I can it get it to work for me at all.

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(“text11”).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(“text11”).text = shortText;

//TODO: write your page related code here…

// 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(“text11”).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(“text11”).text = shortText;

});

export function button3_click(event, $w) {
// check the contents of the text element
if ($w(“text11”).text === shortText) {
// if currently displaying short text, display the full text
$w(“text11”).text = fullText;
$w(“button3”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“text11”).text = shortText;
$w(“button3”).label = “Show more”;
}
}

2

Hello, Stephen,

I checked your code and saw a few errors:

  1. There was a repeating code which was not needed and raised an error (7th to 14th line of your code)
  2. Your selectors were not correct for the elements. You should add # next to element id to select it (e.g #text11 is correct and text11 is not)

Please try the code below. It should work fine if you have text11 and button3 elements in your page.

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("#text11").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("#text11").text = shortText;   
    
    //TODO: write your page related code here...  
});  

export function button3_click(event, $w) { 
    // check the contents of the text element  
    if ($w("#text11").text === shortText) {  
        // if currently displaying short text, display the full text     
        $w("#text11").text = fullText;     
        $w("#button3").label = "Show less";     
    } else {  
        // if currently displaying full text, display the short text     
        $w("#text11").text = shortText;     
        $w("#button3").label = "Show more"; 
    } 
}

Hope this helps
Juste

3

Juste, thank you so much it worked. Have a great day.

4

Hi Juste,

I was having the same issue as above, so what I did was copy and paste the code you provided and then changed the button and text numbers to match what I wanted. I am not familiar with code, but need to have expandable boxes on a company website. The code above did not work, any ideas why?

1243×650 80 KB

5

Hello, Michelle,

I think that the reason why your code is not working is that fullText and shortText variables are undefined in your code. Adding those lines at the beginning should fix that:

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

Hope this helps
Juste