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:
1. 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)
2. 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"; } }
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?
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.