Coded expandable text box actions visible in preview but not when I share for comments

info16049 · August 23, 2019, 10:59am

Hi there, I have used the template code from Wix to create 5 expandable columns of text in an ‘About us’ section and I was wondering if any of you kind people might be able to help? I have two problems but the former is the most important, I can live with problem 2:

When I preview in mobile and desktop the actions work perfectly. The text boxes appear collapsed when the page loads and they expand when clicked. The problem is when I share the page with my client for comments they cannot see the action - the boxes are just fully expanded. (I’ve pasted my code at the bottom of this)
The other point is that no matter how hard I try I can’t get the ‘see more’ button to move with the text boxes no matter how close I align them so I’ve had to move the button above the text box. It seems to sit about 50 pixels beneath the collapsed text box?? The client hasn’t noticed a problem with their location but I would prefer to have the button beneath the collapsed short text. I’ve tried to line them up, overlap them - you name it. It doesn’t move. Any thoughts?

Here is my code:

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 = 90;
// read the full text and store it in the fullText variable
fullText = $w(“#text1”).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(“#text1”).text = shortText;
});
export function button2_click(event) {
// check the contents of the text element
if ($w(“#text1”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text1”).text = fullText;
$w(“#button2”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text1”).text = shortText;
$w(“#button2”).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 shortTextLength2 = 90;
// read the full text and store it in the fullText variable
fullText2 = $w(“#text14”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText2 = fullText2.substr(0, shortTextLength2) + “…”;
// set the contents of the text element to be the short text
$w(“#text14”).text = shortText2;
});

let fullText3; // variable to hold the full text
let shortText3; // variable to hold the short version of the text

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

let fullText4; // variable to hold the full text
let shortText4; // variable to hold the short version of the text

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

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 shortTextLength5 = 90;
// read the full text and store it in the fullText variable
fullText5 = $w(“#text20”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText5 = fullText5.substr(0, shortTextLength5) + “…”;
// set the contents of the text element to be the short text
$w(“#text20”).text = shortText5;
});

export function button4_click(event) {
// check the contents of the text element
if ($w(“#text14”).text === shortText2) {
// if currently displaying short text, display the full text
$w(“#text14”).text = fullText2;
$w(“#button4”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text14”).text = shortText2;
$w(“#button4”).label = “Show more”;
}
}

export function button5_click(event) {
// check the contents of the text element
if ($w(“#text16”).text === shortText3) {
// if currently displaying short text, display the full text
$w(“#text16”).text = fullText3;
$w(“#button5”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text16”).text = shortText3;
$w(“#button5”).label = “Show more”;
}
}

export function button6_click(event) {
// check the contents of the text element
if ($w(“#text18”).text === shortText4) {
// if currently displaying short text, display the full text
$w(“#text18”).text = fullText4;
$w(“#button6”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text18”).text = shortText4;
$w(“#button6”).label = “Show more”;
}
}

export function button7_click(event) {
// check the contents of the text element
if ($w(“#text20”).text === shortText5) {
// if currently displaying short text, display the full text
$w(“#text20”).text = fullText5;
$w(“#button7”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text20”).text = shortText5;
$w(“#button7”).label = “Show more”;
}
}

givemeawhisky · August 23, 2019, 11:22am

https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link

For starters the tutorial that you are using only applies to the one button or toggle. If you are wanting multiples of the code, then you need to adjust your code to suit, you can’t simply paste them all underneath each other as you have done.

All the lets for the texts need to be in one section at the top, followed by the one onReady function for your page.

Then you need to do all the const sections of your code underneath with a space between each.

Finally, followed lastly by all your export functions for the second part of the code which is for the show more/show less toggle.

givemeawhisky · August 23, 2019, 11:29am

https://www.wix.com/corvid/forum/community-discussion/adding-several-expandable-text-boxes-with-read-more-links

https://www.wix.com/corvid/forum/community-discussion/expandable-text-box-w-show-more-button-issue

https://www.wix.com/corvid/forum/community-discussion/large-annoying-space-after-using-show-more-show-less-w-wix-code

https://www.wix.com/corvid/forum/community-discussion/page-not-resizing-on-collapse-is-wix-article-wrong/p-1/dl-5d1ac48db0088400b738c2ea-5d1abb27ae04740077fae22a-1

info16049 · August 23, 2019, 11:40am

Thank you so much for your prompt reply. That would definitely explain why my code doesn’t work but it does work? It works in preview without any error messages both on desktop and mobile. It just doesn’t work for the GetFeedback tool?

info16049 · August 23, 2019, 11:47am

@givemeawhisky Totally loving the links you sent through though so I’ll give them a go. (I’m new to code so all a bit confusing but really appreciate this help)

info16049 · August 23, 2019, 8:37pm

@givemeawhisky Hello again. I’ve re-done the code as you suggested - looks much cleaner (though I’m not a coder so what do I know)! The functionality is still the same - the view buttons all work but they don’t appear on the GetFeedback links I share - do you know if WixCode works with this function? I have totally given up with moving the ‘See more’ buttons beneath the text boxes - mine just do not function properly. I’ve shortened the height, deleted any imaginary spaces, tried grouping, tried moving them with shift and arrows, tried typing the XY values - not a sausage. But don’t worry about that anymore I’m ok with them at top. One thing I am struggling with is the space beneath the collapsed text boxes - it seems to have grown, so there’s a large gap between my two rows of expendables. Please see my new code below (sorry its so long), a screen grab of what the Preview looks like (this is from the Team section) and a link to GetFeedback (https://wix.to/rcCoA00) .

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
let fullTextthree = “”; // variable to hold the full text
let shortTextthree = “”; // variable to hold the short version of the text
let fullTextfour = “”; // variable to hold the full text
let shortTextfour = “”; // variable to hold the short version of the text
let fullTextfive = “”; // variable to hold the full text
let shortTextfive = “”; // variable to hold the short version of the text

$w.onReady ( function (){
// how many characters to include in the shortened version
const shortTextoneLength = 90;
// read the full text and store it in the fullText variable
fullTextone = $w(“#text1”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText 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 = 90;
// read the full text and store it in the fullText variable
fullTexttwo = $w(“#text14”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTexttwo = fullTexttwo.substr(0, shortTexttwoLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text14”).text = shortTexttwo;

// how many characters to include in the shortened version
const shortTextthreeLength = 90;
// read the full text and store it in the fullText variable
fullTextthree = $w(“#text16”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextthree = fullTextthree.substr(0, shortTextthreeLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text16”).text = shortTextthree;

// how many characters to include in the shortened version
const shortTextfourLength = 90;
// read the full text and store it in the fullText variable
fullTextfour = $w(“#text18”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextfour = fullTextfour.substr(0, shortTextfourLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text18”).text = shortTextfour;

// how many characters to include in the shortened version
const shortTextfiveLength = 90;
// read the full text and store it in the fullText variable
fullTextfive = $w(“#text20”).text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortTextfive = fullTextfive.substr(0, shortTextfiveLength) + “…”;
// set the contents of the text element to be the short text
$w(“#text20”).text = shortTextfive;
});

export function button2_click(event) {
// 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(“#button2”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text1”).text = shortTextone;
$w(“#button2”).label = “Show more”;
}
}

export function button4_click(event) {
// check the contents of the text element
if ($w(“#text14”).text === shortTexttwo) {
// if currently displaying short text, display the full text
$w(“#text14”).text = fullTexttwo;
$w(“#button4”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text14”).text = shortTexttwo;
$w(“#button4”).label = “Show more”;
}
}

export function button5_click(event) {
// check the contents of the text element
if ($w(“#text16”).text === shortTextthree) {
// if currently displaying short text, display the full text
$w(“#text16”).text = fullTextthree;
$w(“#button5”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text16”).text = shortTextthree;
$w(“#button5”).label = “Show more”;
}
}

export function button6_click(event) {
// check the contents of the text element
if ($w(“#text18”).text === shortTextfour) {
// if currently displaying short text, display the full text
$w(“#text18”).text = fullTextfour;
$w(“#button6”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text18”).text = shortTextfour;
$w(“#button6”).label = “Show more”;
}
}

export function button7_click(event) {
// check the contents of the text element
if ($w(“#text20”).text === shortTextfive) {
// if currently displaying short text, display the full text
$w(“#text20”).text = fullTextfive;
$w(“#button7”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text20”).text = shortTextfive;
$w(“#button7”).label = “Show more”;
}
}