Multiple expandable text boxes on a single page in WIX

Ask the community
,
1

Hi,
I have recently created a expndable text box on a wix site following your step by step guide
https://support.wix.com/en/article/creating-an-expandable-text-box-with-a-show-more-link-using-wix-code

This works fine for a single text box, but when I try and replicate this for multiple text boxes on a single page I run into trouble. I try and enter the correct element id’s for text boxes and buttons but it just does not seem to work. I have enclosed a screenshot of the page showing the elements with the code underneath. Allocating short and long text fields for multiple text boxes also errors. I would also like to remove the “&nbsp:” from the bottom of the first text box when it opens to reveal full text. I know this to be non breaking space, but cannot locate the code to delete it. I am new to code so I would appreciate any help you have.

Regards Gavin

881×1129 178 KB

2

Hi,
How about using event.target instead of $w(‘#text28’)?
Roi.

3

None of those codes worked after many hours playing with them. A good option would be a pop up page to be triggered by a button but the code is not available. Only open once and click on image is possible.

4

I am trying to figure out how to have many expandable text boxes on one page too! But it’s doing funny things like only using information from one text element for all the buttons even though (I think) I’ve assigned each button to their appropriate text element. I am not a coder so I’m sure I’m doing something wrong, I just don’t know what to fix.

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 Velo API Reference - Wix.com

$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 0;
// 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;

});

export function button1_click(event, $w)
{
// 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 = “Show more”;
}
}

$w.onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 0;
// read the full text and store it in the fullText variable
fullText = $w(“#text17”).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(“#text17”).text = shortText;

});

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

5

I’m having the exact same problem - has anyone found a solution?!

6

Solution:

For the second set of code, replace all the “shorttext” and “longtext” elements with a #. ie;

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 = 30;
// read the full text and store it in the fullText variable
fullText = $w(“#text17”).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(“#text17”).text = shortText;

});

export function button6_click(event, $w) {
// check the contents of the text element
if ($w(“#text17”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text17”).text = fullText;
$w(“#button6”).label = “Show Less”;
} else {
// if currently displaying full text, display the short text
$w(“#text17”).text = shortText;
$w(“#button6”).label = “Show More”;
}
}

let fullText2; // variable to hold the full text
let shortText2; // variable to hold the short version of the text

$w.onReady( function () {
// how many characters to include in the shortened version
const shortText2Length = 40;
// read the full text and store it in the fullText variable
fullText2 = $w(“#text22”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText2 = fullText2.substr(0, shortText2Length) + “…”;
// set the contents of the text element to be the short text
$w(“#text22”).text = shortText2;

});

export function button7_click(event, $w) {
if ($w(“#text22”).text === shortText2) {
// if currently displaying short text, display the full text
$w(“#text22”).text = fullText2;
$w(“#button7”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text22”).text = shortText2;
$w(“#button7”).label = “Show more”;
}
}

let fullText5; // variable to hold the full text
let shortText5; // variable to hold the short version of the text

$w.onReady( function () {
// how many characters to include in the shortened version
const shortText5Length = 40;
// read the full text and store it in the fullText variable
fullText5 = $w(“#text24”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText5 = fullText5.substr(0, shortText5Length) + “…”;
// set the contents of the text element to be the short text
$w(“#text24”).text = shortText5;

});

export function button8_click(event, $w) {
if ($w(“#text24”).text === shortText5) {
// if currently displaying short text, display the full text
$w(“#text24”).text = fullText5;
$w(“#button8”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text24”).text = shortText5;
$w(“#button8”).label = “Show more”;
}
}

7

this actually works! Thanks!! will re-post this to other threads to help others!

8

Hi all, following up on those multiple expandable boxes, I am trying to do exactly the same, and whatever I try only the first expandable box works …
Using the same code as @kylermuscat : same problem. Putting all the onReady content into on onReady: same problem.
Is there a specific syntax when repeating “export function” in one code page ? I am really blocked and don’t know what else to try so if anyone could give me some hints it would be greatly appreciated :slight_smile:

9

Hello. Can anyone please please help ? I’ve done exactly the code above to the letter & still my first show more toggle works perfectly & still my second shie more toggle does nothing when clicked ! I just don’t understand what’s going wrong & getting so frustrated !!! so I’ve done exactly the code above for two show more/less toggles on two buttons under two text boxes. I need to have them work on 6 altogether all on the same page. id hugely appreciate it thank you

10

I’m the same :frowning: CAN ANYONE say why when I’ve followed the exact code set up as above my second show more button still gives me nothing ?? Really want to resolve it :frowning: THANK YOU ps: when I change the amount of words it shows in full text before the button for click more it changes correctly in preview on both box 1 & 2 so it’s working there must just be something not connecting it so that it extends on click

11

I´ve got the same problems and no solution. first only my first box worked, then my other boxes worked but copied the text from the first box. it´s been a week im trying to figure out but nothing so far

12

Old post from 2018 being closed.